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

JavaScript AJAX Basics (retiring) AJAX and APIs Displaying the Photos

ryan champin
ryan champin
16,836 Points
Posted by ryan champin
ryan champin
16,836 Points

AJAX 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
STAFF
Dave McFarland
Treehouse Teacher
Dave McFarland
Dave McFarland
Treehouse Teacher

There 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
ryan champin
16,836 Points
ryan champin
ryan champin
16,836 Points

ha omg ur a genius thank you so much.....i guess i need to re watch the jsonp part of ur videos lol

Dave McFarland
STAFF
Dave McFarland
Treehouse Teacher
Dave McFarland
Dave McFarland
Treehouse Teacher

Hi 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
ryan champin
16,836 Points
ryan champin
ryan champin
16,836 Points

ok 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
ryan champin
16,836 Points
ryan champin
ryan champin
16,836 Points

now im just trying to figure out how to get other images other than the defaut one