Welcome to the Treehouse Community
Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.
Looking to learn something new?
Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.
Start your free trial
Tyler Morgan
18,333 Points[SOLVED] Unable to pull from Flickr API
I am unable to get the AJAX to work that should pull in pictures from Flickr. I have tried running my own files as well as the course file from a workspace and from my local LAMP stack. I do not see any errors in the console. Thank you in advance for any help.
Tyler Morgan
18,333 PointsDave McFarland I did download the course files and I tried both the Stage 4 - Videos 5 and 6. My hope was to test a working version to see if it was code or system issues. Upon further inspection neither of those contains the completed project which explains whey they didn't run. Now that I know it might not be a system issue I will comb through my code a little more thoroughly and see if I can diagnose the issue.
Tyler Morgan
18,333 PointsDave McFarland turns out I was just missing a '#'. Code runs just fine. Appreciate you taking the time to assist.
Dave McFarland
Treehouse TeacherGlad you got it to work. I'll look at the project files -- there should be a working copy in there. I'll upload new project files if that's the case. Thanks for pointing this out.
Marcus Parsons
15,719 PointsMarked as solved
3 Answers
Faddah Wolf
12,811 Pointsi am having the same issue - i have tried loading both my code where i followed along and painstaking copied everything you did in the video, and also i tried running it from the "finished" folder of completed code you had in the Workspaces for this module. neither works.
here is my completed code --
$(document).ready(function(){
$('button').click(function(){
$('button').removeClass('selected');
$(this).addClass('selected');
var flickrAPI = "http://api.flickr.com/services/feed/photos_public.gne?jsoncallback=?";
var animal = $(this).text();
var flickrOptions = {
tags: animal,
format: "json"
}; // end flickrOptions object
function displayPhotos(data) {
var photoHTML = '<ul>';
$.each(data.items, function(i, photo){
photoHTML += '<li class="grid-25 tablet-grid-50">';
photoHTML += '<a href="' + photo.link + '" class="image">';
photoHTML += '<img src="' + photo.media.m + '"></a></li>';
});
photoHTML += '</ul>';
$('#photos').html(photoHTML);
}; // end displayPhotos callback function
$.getJSON(flickrAPI, flickrOptions, displayPhotos);
}); // end button click
}); // end ready
... and here is the code from your "finished" folder -
$(document).ready(function() {
$('button').click(function () {
// highlight the button
// not AJAX, just cool looking
$("button").removeClass("selected");
$(this).addClass("selected");
// the AJAX part
var flickerAPI = "http://api.flickr.com/services/feeds/photos_public.gne?jsoncallback=?";
var animal = $(this).text();
var flickrOptions = {
tags: animal,
format: "json"
};
function displayPhotos(data) {
var photoHTML = '<ul>';
$.each(data.items,function(i,photo) {
photoHTML += '<li class="grid-25 tablet-grid-50">';
photoHTML += '<a href="' + photo.link + '" class="image">';
photoHTML += '<img src="' + photo.media.m + '"></a></li>';
}); // end each
photoHTML += '</ul>';
$('#photos').html(photoHTML);
}
$.getJSON(flickerAPI, flickrOptions, displayPhotos);
}); // end click
}); // end ready
...neither one of these works in my chrome browser, and the only message i get in the console is the proper return of the jQuery $.getJSON(...) API call, but the window never populates with the folder from either my code or yours --
GET https://api.flickr.com/services/feed/photos_public.gne?jsoncallback=jQuery11110005535644246265292_1418080587685&tags=Cat&format=json&_=1418080587686 jquery-1.11.1.min.js:4
any help here to make this work would be most appreciated. thank you.
best,
-- faddah wolf portland, oregon, u.s.a.
Dave McFarland
Treehouse TeacherHi Faddah Wolf
The URL you're supplying is incorrect. The word feed in your code should be feeds like this:
var flickrAPI = "http://api.flickr.com/services/feeds/photos_public.gne?jsoncallback=?";
Faddah Wolf
12,811 Points@Dave MacFarland -
that was it! silly me. dunno why the code in the "finished" folder didn't work either, though. strange. but thank you for the help.
best,
-- faddah wolf portland, oregon, u.s.a.
Dave McFarland
Treehouse TeacherThe reason it might not work: when you preview a workspace, only the index.html file in the top level is loaded. To see other pages like those in the __finished__ directory you have to add that manually to the URL. For example: http://port-80-m3b9jcht43.treehouse-app.com/__finished__/
Faddah Wolf
12,811 Pointsah, that's probably it. thank you for the answers. i enjoyed the "AJAX Basics" course you did, very much. you can mark this one closed.
best,
-- faddah wolf portland, oregon, u.s.a.
Geert-Jan Hendriks
23,126 Pointscan you give an example of your code?
Bridger Hammond
Front End Web Development Techdegree Graduate 14,156 PointsI was losing my shit over this! Ended up being my API url was incorrect.
Dave McFarland
Treehouse TeacherDave McFarland
Treehouse TeacherHi Tyler Morgan
Did you download the project files for the course? If so, could you tell me which file you've tested and didn't work?