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 trialryan champin
16,836 PointsAJAX and the dribbble API
Im following the ajax with flickr tutorial and i have everything working. but the flickr feed for the pics i want sucks so i want to use dribbble. but first, the docs say nothing abt how to alter their feed url...which is this:
http://api.dribbble.com/shots/21603
so im not sure if i have to add the ?jsoncallback=? to this....second the error im currently getting is:
XMLHttpRequest cannot load http://api.dribbble.com/shots/21603?tags=websites&format=json. No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://localhost:8888' is therefore not allowed access.
here is my code
$(document).ready(function(){
var flickrAPI = "http://api.dribbble.com/shots/21603";
var flickrOptions = {
tags : "websites",
format : "json"
};
function displayPhotos(data){
var photoHTML = "<ul>";
$.each( data.items, function(i, photo){
photoHTML += '<li>';
photoHTML += '<a href="' + photo.url + '">';
photoHTML += '<img src="' + photo.image_url + '"></a></li>';
});
photoHTML += '</ul>';
$('body').append(photoHTML);
}
$.getJSON(flickrAPI, flickrOptions, displayPhotos);
});
and this is the dribbble api info
$ curl http://api.dribbble.com/shots/21603
---
{
"id": 21603,
"title": "Moon",
"description": "My response to Mr. Henry's Friday 20 minute \"moon\" design challenge.\n\nFun. Random. Rough. No clue.",
"url": "https://dribbble.com/shots/21603-Moon",
"short_url": "http://drbl.in/21603",
"image_url": "https://dribbble.com/system/users/1/screenshots/21603/shot_1274474082.png",
"image_teaser_url": "https://dribbble.com/system/users/1/screenshots/21603/shot_1274474082_teaser.png",
"width": 400,
"height": 300,
"views_count": 1693,
"likes_count": 15,
"comments_count": 4,
"rebounds_count": 0,
"rebound_source_id": 21595,
"created_at": "2010/05/21 16:34:42 -0400",
"player": {
"id": 1,
"name": "Dan Cederholm",
"username": "simplebits",
"url": "https://dribbble.com/simplebits",
"avatar_url": "https://dribbble.com/system/users/1/avatars/original/dancederholm-peek.jpg",
"location": "Salem, MA",
"twitter_screen_name": "simplebits",
"drafted_by_player_id": null,
"shots_count": 147,
"draftees_count": 103,
"followers_count": 2027,
"following_count": 354,
"comments_count": 2001,
"comments_received_count": 1509,
"likes_count": 7289,
"likes_received_count": 2624,
"rebounds_count": 15,
"rebounds_received_count": 279,
"created_at": "2009/07/07 21:51:22 -0400"
}
}
4 Answers
Dave McFarland
Treehouse TeacherThere is no shots
property on the returned JSON data. You can check this yourself by adding console.log (data);
inside the callback. This will print out the Object returned. There's just a single shot returned, so you can use data.image_url
instead. For example, try this:
function displayPhotos(data){
var photoHTML = "<ul>";
console.log(data);
photoHTML += '<li>';
photoHTML += '<a href="' + data.image_url + '">';
photoHTML += '<img src="' + data.image_url + '"></a></li>';
photoHTML += '</ul>';
$('body').append(photoHTML);
}
ryan champin
16,836 Pointsha omg ur a genius thank you so much.....i guess i need to re watch the jsonp part of ur videos lol
Dave McFarland
Treehouse TeacherHi ryan champin
You need to add ?callback=?
to the end of the URL. For example:
var dribbleAPI = "http://api.dribbble.com/shots/21603?callback=?";
ryan champin
16,836 Pointsok so this is my updated code
$(document).ready(function(){
var flickrAPI = "http://api.dribbble.com/shots/21603?callback=?";
var flickrOptions = {
};
function displayPhotos(data){
var photoHTML = "<ul>";
$.each( data.shots, function(i, photo){
photoHTML += '<li>';
photoHTML += '<a href="' + photo.image_url + '">';
photoHTML += '<img src="' + photo.image_url + '"></a></li>';
});
photoHTML += '</ul>';
$('body').append(photoHTML);
}
$.getJSON(flickrAPI, flickrOptions, displayPhotos);
});
and i get this error coming from the actual jquery file lol
Uncaught TypeError: Cannot read property 'length' of undefined jquery.js:7115
according to the dribbble api the url object key is 'image_url' so thats why im using photo.image_url when adding to the photoHTML variable
ryan champin
16,836 Pointsnow im just trying to figure out how to get other images other than the defaut one