I've been working on a side project and have hit a roadblock. I can search through tags and display their picture results just fine, but I'd also like to put the details below each picture, specifically the location information. I'm doing this in Javascript, and commented out the lines I believe need to be adjusted, but with the comment marks removed not even the pictures show up. Any tips? A JSON object printed by a call to Instagram returns this data:
Object
- data: Array[20]
- 0: Object
+ caption: Object
+ comments: Object
created_time: "1334402906"
filter: "Nashville"
id: "169306311223447303_5913362"
- images: Object
+ low_resolution: Object
- standard_resolution: Object
height: 612
url: "http://distilleryimage7.instagram.com/f3f8d7b2862411e19dc71231380fe523_7.jpg"
width: 612
+ thumbnail: Object
+ likes: Object
link: "http://instagr.am/p/JZfzFqtI8H/"
location: Object
tags: Array[1]
type: "image"
user: Object
And my code looks like this:
// Instantiate an empty object.
var Instagram = {};
// Small object for holding important configuration data.
Instagram.Config = {
clientID: 'xxxxxxxxxxxxxxxxxxxxxxxxxxxxx',
apiHost: 'https://api.instagram.com'
};
// ************************
// ** Main Application Code
// ************************
(function(){
var photoTemplate, resource;
function init(){
bindEventHandlers();
photoTemplate = _.template($('#photo-template').html());
}
function toTemplate(photo){
photo = {
count: photo.likes.count,
avatar: photo.user.profile_picture,
photo: photo.images.low_resolution.url,
url: photo.link
//location: photo.location <--------------------------This line.
};
return photoTemplate(photo);
}
function toScreen(photos){
var photos_html = '';
//var photos_location = ''; <------------------------This line.
$('.paginate a').attr('data-max-tag-id', photos.pagination.next_max_id)
.fadeIn();
$.each(photos.data, function(index, photo){
photos_html += toTemplate(photo);
//photos_location += toTemplate(photo); <-----------------This line.
});
$('div#photos-wrap').append(photos_html);
//$('div#photos-wrap').append(photos_location) <------------------This line.
}
function generateResource(tag){
var config = Instagram.Config, url;
if(typeof tag === 'undefined'){
throw new Error("Resource requires a tag. Try searching for cherry blossoms.");
} else {
// Make sure tag is a string, trim any trailing/leading whitespace and take only the first
// word, if there are multiple.
tag = String(tag).trim().split(" ")[0];
}
// Configures the URL to search for pictures that fit the tag description.
url = config.apiHost + "/v1/tags/" + tag + "/media/recent?callback=?&client_id=" + config.clientID;
return function(max_id){
var next_page;
if(typeof max_id === 'string' && max_id.trim() !== '') {
next_page = url + "&max_id=" + max_id;
}
return next_page || url;
};
}
function paginate(max_id){
$.getJSON(generateUrl(tag), toScreen);
}
function search(tag){
resource = generateResource(tag);
$('.paginate a').hide();
$('#photos-wrap *').remove();
fetchPhotos();
}
function fetchPhotos(max_id){
$.getJSON(resource(max_id), toScreen);
}
function bindEventHandlers(){
$('body').on('click', '.paginate a.btn', function(){
var tagID = $(this).attr('data-max-tag-id');
fetchPhotos(tagID);
return false;
});
// Bind an event handler to the `submit` event on the form
$('form').on('submit', function(e){
// Stop the form from fulfilling its destinty.
e.preventDefault();
// Extract the value of the search input text field.
var tag = $('input.search-tag').val().trim();
// Invoke `search`, passing `tag` (unless tag is an empty string).
if(tag) {
search(tag);
};
});
}
function showPhoto(p){
$(p).fadeIn();
}
// Public API
Instagram.App = {
search: search,
showPhoto: showPhoto,
init: init
};
}());
$(function(){
Instagram.App.init();
Instagram.App.search('takoyaki');
});
