How to style json feed output - javascript

I would like to style json feed output. I want to be able to arrange it as I want. So far this is my javascript code. I would like to achieve something like this IMG, information's such as age number etc would be possible to change location etc. I want this to work on jquery mobile as i am building an application.
function listPosts(data) {
var output = '<ul data-role="listview" data-filter="true">';
$.each(data.posts, function(key, val)
{
var tempDiv = document.createElement("tempDiv");
tempDiv.innerHTML = val.excerpt;
$("a", tempDiv).remove();
var excerpt = tempDiv.innerHTML;
output += '<li>';
output += '<a href="#blogpost" onclick = "showPost('+ val.id +') ">';
output += '<h3>' + val.title + "</h3>";
output += (val.thumbnail) ?
'<img src="' + val.thumbnail + '" alt="' + val.title + '">':
'<img src="images/itblogo.png" alt="ITB Logo">';
output += '<h3>' + val.custom_fields.gender + "</h3>";
output += '<h3>' + val.custom_fields.age + "</h3>";
output += '</a>';
output += '</li>';
}); //go through each post
output += "</ul>";
$('#postlist').html(output);
} //listPosts
function showPost(id) {
$.getJSON('http://www.pawmatch.info?json=get_post&post_id=' + id + '&callback=?', function(data) {
var
output ='<img src="'+data.post.thumbnail + '">'
output += '<h3>' + data.post.custom_fields.dogs_name + '</h3>'
output +='<h3>'+data.post.custom_fields.dog_size + '</h3>'
output +='<h3>'+data.post.custom_fields.age + '</h3>'
output +='<h3>'+data.post.custom_fields.gender + '</h3>'
output +='<h3>'+data.post.custom_fields.breed + '</h3>'
output +='<h3>'+data.post.custom_fields.extra_information + '</h3>'
$('#mypost').html(output);
});
}

Related

How do I get an ID from a click event handler?

I am trying to create an ID to use as a selector for a modal that I will then be able to access the display properties.
$.ajax({
url: 'https://randomuser.me/api/?results=12',
dataType: 'json',
success: function(data) {
console.log(data);
employees = data.results;
$.each(employees, function (i, employee) {
newHTML += '<div id="' + i + '" class="container">';
newHTML += '<div class="employee-img-container">';
newHTML += '<img class="employee-img" src="' + employee.picture.large + '" alt="employee image">';
newHTML += '</div>';
newHTML += '<div class="employee-info-container">';
newHTML += '<h3 class="employee-name">' + employee.name.first + ' ' + employee.name.last + '</h3>';
newHTML += '<p class="employee-email">' + employee.email + '</p>';
newHTML += '<p class="employee-location">' + employee.location.city + ', ' + employee.location.state + '</p>';
newHTML += '</div></div></div></div>';
employeeArr.push(employee);
modalHTML += '<div id="modal' + i + '" class="modal">';
modalHTML += '<div class="modal-content">';
modalHTML += '<div class="modal-header">';
modalHTML += '<span class="close">×</span>';
modalHTML += '<img class="employee-img" src="' + employee.picture.large + '" alt="employee image">';
modalHTML += '<h2 class= emp-modal-name>' + employee.name.first + ' ' + employee.name.last + '</h2>';
modalHTML += '</div';
modalHTML += '<div class="modal-body">';
modalHTML += '<p>Employee Info</p>';
modalHTML += '</div></div></div>';
modalArr.push(employee);
});
$('.grid-container').html(newHTML);
$('.modal-container').html(modalHTML);
$('.container').on('click', function (event) {
console.log(event.currentTarget.id);
let newId = '#modal' + event.currentTarget.id;
let displayModal = $(newId)
let display = document.querySelector(newId);
//displayModal.style.display = 'block';
console.log(displayModal);
console.log(display);
console.log(newId);
});
}
});
When I log the event.currentTarget.id I get a number, and I can also create a string that I want to use as a selector. I can't figure out how to use it as the actual sector though. Not sure if I need to use an if statement to compare it to the id of the modal class that i want to display. Thanks!
Try like this
$(document).ready(function() {
$("a").click(function(event) {
alert(event.target.id);
});
});

Trouble with jQuery loop through array of objects

I'm trying to nest 3 divs within a "row" div.
I had this working in "long format" (multiple var's instead of looping through the array). I've refactored my code and now I don't get any error codes AND my code does not append to the HTML file. When I console log I get an array with 3 objects. I'm sure i'm missing something minor.
Anyways some help would be great!
<div class="row">
**nested divs go here.
</div>
$(document).ready(function() {
$.get("http://api.openweathermap.org/data/2.5/forecast/daily?id4726206&cnt=3", {
APPID: "MY API KEY",
lat: 29.423017,
lon: -98.48527,
units: "imperial"
}).done(function(data) {
var stationId = data.city.name;
// Stattion Name
$('#station').append(stationId);
//console.log(data);
var forecast = data.list;
//Wind Direction in Compass Format
function getDirection(dir) {
var compass = ['N', 'NNE', 'NE', 'ENE', 'E', 'ESE', 'SE', 'SSE', 'S', 'SSW', 'SW', 'WSW', 'W', 'WNW', 'NW', 'NNW'];
var result = Math.floor((360 - dir) / 22.5);
return compass[result];
}
//Forecast Variables
$.each(forecast, function(i, v) {
var html = '';
html += "<div class='col-sm-3 wInfo'>" + "<div class='title'>High / Low</div>";
html += "<div class='cTemp'>" + (Math.ceil(forecast[i].temp.max)) + '°';
html += " / " + (Math.ceil(forecast[i].temp.min)) + '°' + "</div>";
html += "<div class='tempIcon'>" + "<img src='http://openweathermap.org/img/w/" + forecast[i].weather[0].icon;
html += ".png' alt=''></div>" + "<div class='conditions' id='castId'>" + '<span class="cond">' + forecast[i].weather[0].main;
html += "</span>: " + "<span>" + forecast[i].weather[0].description + '</span>' + "</div>";
html += "<div class='conditions'>" + "<span class='cond'>Humidity: </span>" + "<span>" + forecast[i].humidity + "%</span></div>";
html += "<div class='conditions'>" + "<span class='cond'>Wind: </span>" + "<span>" + (Math.floor(forecast[i].speed));
html += " mph / " + getDirection(forecast[i].deg) + "</span></div>" + "<div class='conditions'>";
html += "<span class='cond'>Pressure: </span>" + "<span>" + forecast[i].pressure + "</span></div>";
return html;
});
$('.forecast').append(forecast);
console.log(forecast);
});
});
You are trying to append the array forecast in html. which wont work. You should declare the html variable outside and then use it in append function.
I will also recommend to use string builder logic using array and then convert it to string and append it. remember string concatenation is heavy operator as it creates new instance of elememt every time concatenation is done :
var html = [];
$.each(forecast, function(i, v) {
html.push("<div class='col-sm-3 wInfo'>" + "<div class='title'>High / Low</div>");
html.push("<div class='cTemp'>" + (Math.ceil(forecast[i].temp.max)) + '°');
html.push(" / " + (Math.ceil(forecast[i].temp.min)) + '°' + "</div>");
html.push("<div class='tempIcon'>" + "<img src='http://openweathermap.org/img/w/" + forecast[i].weather[0].icon);
html.push(".png' alt=''></div>" + "<div class='conditions' id='castId'>" + '<span class="cond">' + forecast[i].weather[0].main);
html.push("</span>: " + "<span>" + forecast[i].weather[0].description + '</span>' + "</div>");
html.push("<div class='conditions'>" + "<span class='cond'>Humidity: </span>" + "<span>" + forecast[i].humidity + "%</span></div>");
html.push("<div class='conditions'>" + "<span class='cond'>Wind: </span>" + "<span>" + (Math.floor(forecast[i].speed)));
html.push(" mph / " + getDirection(forecast[i].deg) + "</span></div>" + "<div class='conditions'>");
html.push("<span class='cond'>Pressure: </span>" + "<span>" + forecast[i].pressure + "</span></div></div>");
});
$('.forecast').append(html.join(""));

Issues with fancybox .iframe

I have issues when trying to display a YouTube file using the fancybox iframe. It displays a small frame with a scroller. I have attached a link to the code. I am using the YouTube API to extract the content.
https://jsfiddle.net/Le98zx1s/
jQuery displaying to html
function getOutput (item)
{
var videoId = item.id.videoId;
var title = item.snippet.title;
var description = item.snippet.description;
var thumb = item.snippet.thumbnails.high.url;
var channelTitle = item.snippet.channelTitle;
var videoDate = item.snippet.publishedAt;
var output = '<li>' +
'<div class = "list-left">' +
'<img src="' + thumb + '">' +
'</div>' +
'<div class ="list-right">' +
'<h3><a class="fancybox fancybox.iframe"' + 'href="http://youtube.com/embed/' + videoId + '">' + title + '</a></h3>' +
'<small>By <span class="cTitle">' + channelTitle + '</span> on ' + videoDate + '</small>' +
'<p>' + description+'</p>' +
'</div>' +
'</li>' +
'<div class ="clearfix"></div>' + ' ';
return output;
}

How do you pass json data from one page to another to reference the same row of data?

I am pulling address location information from a google spreadsheet and using it to create buttons. When you click on a button it then should open and populate the data for that location in a new page or if need into a dialog box.
How do you pass the information to a new page and complete the if statement? Everything works great if I manually add the entry.id.$t string in the last if statement.
$(document).ready(function () {
$(function FISLocations() {
$.getJSON("https://spreadsheets.google.com/feeds/list/GoogleSpreadsheetKey/od6/public/values? alt=json-in-script&callback=?",
function (data) {
$('.loc').append('<ul class="collapsibleList" id="list"><li><label for="mylist-node1" class="css_btn_classlist">Alabama</label><input type="checkbox" id="mylist-node1" /><ul class="loclist"></ul></li></ul>');
$.each(data.feed.entry, function (i, entry) {
var item = '<span style="display:none ">' + entry.id.$t + '</span>';
item += ' ' + entry.gsx$cityst.$t;
if (entry.gsx$state.$t == "AL") {
$('.loclist').append('<li>' + item + '</li>');
};
});
$('.poploc').append('<div class="items"></div>');
$.each(data.feed.entry, function (i, entry) {
var itemp = '<span style="display:none ">' + entry.id.$t + '</span>';
itemp += '' + entry.gsx$address1.$t + '<br/>';
itemp += ' ' + entry.gsx$city.$t + ', ';
itemp += ' ' + entry.gsx$state.$t;
itemp += ' ' + entry.gsx$postal.$t + '<br/>';
itemp += ' ' + entry.gsx$phone.$t + '<br/>';
itemp += ' ' + entry.gsx$fax.$t + '<br/>';
itemp += '<div class="px12bold"> ' + entry.gsx$email.$t + '<br/ ></div>';
itemp += '<div class="locmid"><br/><a ' + entry.gsx$androidloc.$t + 'class="css_btn_classsmall noselect">Map Us</a>';
itemp += ' Email Us ';
itemp += ' Call us </div>';
if (entry.id.$t == ? ? ? ? ? ? ) {
$('.items').append('<br>' + itemp + '</span><br/>');
};
});
});
});
});

Need help with Flickr/JSON/Javascript issue when displaying gallery images

Wondering if anyone can help me. I'm trying to put together a weekly photo competition page by pulling in photos from a Flickr gallery, but I can't get the images to display. It works OK for groups, but having some problems with the gallery code. Getting the correct JSON response, but can't get the results to display on the page as good as the group images do.
Here's my Javascript:
$(function() {
var map;
var markers = [];
var infowindow;
// Get gallery photos
var visibleGallery;
$.getJSON("http://api.flickr.com/services/rest/" +
"?method=flickr.galleries.getPhotos" +
"&api_key=XXXX" +
"&photoset_id=XXXX" +
"&extras=geo,tags,url_sq,url_t,url_s,url_m,url_o" +
"&format=json&jsoncallback=?", function(data, textStatus) {
var htmlString = '<div id="weekContainer">';
var weeks = sortIntoWeekArrays(data.photos.photo);
$.each(weeks, function(i, week)
{
var weekNumber = i + 1;
var numberOfWeeks = weeks.length - 1;
htmlString += '<div id="week' + weekNumber + '">';
htmlString += '<ul class="weeks">';
if(i < numberOfWeeks)
{
htmlString += '<li><a class="weekLinksNext" href="#"><span>Next</span></a></li>';
}
var sunday = new Date(week.monday.toUTCString());
sunday.setDate(week.monday.getDate() + 6);
htmlString += '<li class="weekTitle">Week ' + weekNumber + ':</li><li class="weekDate"> ' + week.monday.format("ddd d mmm") + ' — ' + sunday.format("ddd d mmm") + '</li>';
if(i > 0)
{
htmlString += '<li><a class="weekLinksPrev" href="#"><span>Previous</span></a></li>';
}
htmlString += '</ul>';
if(week.winner !== undefined)
{
htmlString += '<p class="galleryTitleFirst">Photo of the Week</p>';
htmlString += '<ul class="imagesWinners">';
htmlString += '<li class="winner"><a href="http://www.flickr.com/photos/' + week.winner.owner + '/' + week.winner.id + '" target="_blank">';
htmlString += '<img title="' + week.winner.title + '" src="' + week.winner.url_m + '" alt="' + week.winner.title + '" />';
htmlString += '</a></li>';
htmlString += '<li class="name">' + week.winner.title + '</li>';
htmlString += '<li class="owner">' + 'by ' + week.winner.ownername + '</li>';
htmlString += '</ul>';
}
htmlString += '<p class="galleryTitle">Our other favourites this week</p>';
htmlString += '<ul class="imagesRunnersUp">';
$.each(week.images, function(i, item)
{
htmlString += '<li><a href="http://www.flickr.com/photos/' + item.owner + '/' + item.id + '" target="_blank">';
htmlString += '<img title="' + item.title + '" src="' + item.url_sq + '" alt="' + item.title + '" />';
htmlString += '</a></li>';
if(item.longitude == "0" && item.latitude == "0")
{
return true;
}
var latlng = new google.maps.LatLng(item.latitude, item.longitude);
var marker = new google.maps.Marker(
{
position: latlng,
map: map,
title:item.title
});
marker.content = '<img title="' + item.title + '" src="' + item.url_s + '" alt="' + item.title + '" />';
markers.push(marker);
});
htmlString += '</ul>';
htmlString += '</div>';
});
htmlString += '</div>';
$('div#weekViewer').append(htmlString);
$('div#weekContainer > div').css('float', 'left').css('margin-right', '30px');
$('div#weekContainer').width(weeks.length * 450);
$('div#weekContainer .weekLinksPrev')
.click(function(){
$('div#weekViewer').animate({scrollLeft: '-=450'}, 'slow');
return false;
});
$('div#weekContainer .weekLinksNext')
.click(function(){
$('div#weekViewer').animate({scrollLeft: '+=450'}, 'slow');
return false;
});
});
});
function sortIntoWeekArrays(items)
{
var weeks = [];
// Returns single dimension array containing single dimension arrays
$(items).each(function(i, item)
{
var monday = new Date(item.dateadded * 1000);
monday.setDate(monday.getDate() - monday.getDay() + 1);
monday.setHours(0,0,0,0);
var week, thisWeek;
for (i in weeks)
{
week = weeks[i];
if(week.monday - monday == 0)
{
thisWeek = week;
break;
}
}
if(thisWeek === undefined)
{
thisWeek =
{
monday: monday,
images: []
};
weeks.push(thisWeek);
}
if($.inArray('winner', item.tags.split(" ")) > -1)
{
thisWeek.winner = item;
}
else
{
thisWeek.images.push(item);
}
});
return weeks.sort(function(first, second)
{
return (first.monday > second.monday) - (first.monday < second.monday);
});
}
Any help would be fantastic :)
Regards,
David
Worked it out after some help from a friend. I was missing the date_upload value in the extras argument and item.dateadded needed to change to item.upload.

Categories

Resources