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

Posted by Chris Thomas
.a{fill-rule:evenodd;}techdegree seal-36
Chris Thomas
Front End Web Development Techdegree Graduate 34,909 Points

Having trouble accessing API information using jQuery $.getJSON() method

I'm working on Project 10 for the Front End Web Development Techdegree. Essentially I need to retrieve information from an API and display it. I've done the courses on it using Flickr however I need to use another API and I chose http://www.pokeapi.co/

My plan is to display the starter Pokemon and their evolutions, thus 9 being displayed total.

So far I have

//* Pokemon API *//
//* API
var pokeAPI = "http://pokeapi.co/api/v2/pokemon/?limit=9";

//* Options
var pokeOptions = {

};

//* Display
function pokeDisplay(pokeData) {
  var pokeHTML = '<ul>';

  pokeHTML += '<div>' + pokeData.results + '</div>';

  pokeHTML += '</ul>';

  $('.pokemon-gallery').html(pokeHTML);
}

//* Get JSON
$.getJSON(pokeAPI, pokeOptions, pokeDisplay);

and this gets added to a <div> with class pokemon-gallery. Just to start I'd like to at least list the 9 names.

pokeData.results shows 9 objects being displayed as [Object object] but I don't know how to access the information deeper. Would I need to loop through several API URLs such as http://pokeapi.co/api/v2/pokemon/1 and http://pokeapi.co/api/v2/pokemon/2 and http://pokeapi.co/api/v2/pokemon/3 and so on? Then access the individual information?

If I could just get started with a list of the Pokemon names, I could work from there, but just getting started has me troubled.

1 Answer

Christin Lepson
Christin Lepson
24,269 Points

I just finished this project (but I used the Spotify API). In order to see your results, you should log them to the console with console.log(pokeData.results), then you can look into the contents. (Or you could just paste the http://pokeapi.co/api/v2/pokemon/?limit=9 URL into your browser and look at it in there.)

It looks like your pokeData.results is an array of 9 items. Each item contains only 2 elements: the URL for the Pokemon and its name.

For example, pokeData.results[0] is { url: "http://pokeapi.co/api/v2/pokemon/1/", name: "bulbasaur" }

You can use a for loop on the pokeData.result in order to get the names of each Pokemon. But if you want to get more info than just the Pokemon's URL and name, you will have to do an AJAX request for each Pokemon URL.

Chris Thomas
.a{fill-rule:evenodd;}techdegree seal-36
Chris Thomas
Front End Web Development Techdegree Graduate 34,909 Points

I appreciate you taking the time to answer! And that's great you just finished it too!

I've started to retrieve the data. It's a crude approach for now (no loops or anything) but easier for me to understand and debug. The two issues I'm running into now is 1) It's slow doing 9 $.getJSON() requests and 2) The order in which they load is not correct. is there a way to force a strict order of loading?

//* Pokemon API *//
//* API
var pokeAPI = [];
pokeAPI[0] = 'http://pokeapi.co/api/v2/pokemon/1/';
pokeAPI[1] = 'http://pokeapi.co/api/v2/pokemon/2/';
pokeAPI[2] = 'http://pokeapi.co/api/v2/pokemon/3/';
pokeAPI[3] = 'http://pokeapi.co/api/v2/pokemon/4/';
pokeAPI[4] = 'http://pokeapi.co/api/v2/pokemon/5/';
pokeAPI[5] = 'http://pokeapi.co/api/v2/pokemon/6/';
pokeAPI[6] = 'http://pokeapi.co/api/v2/pokemon/7/';
pokeAPI[7] = 'http://pokeapi.co/api/v2/pokemon/8/';
pokeAPI[8] = 'http://pokeapi.co/api/v2/pokemon/9/';

//* Options
var pokeOptions = {

};

//* Display
function pokeDisplay(pokeData) {

  var pokeHTML = '<li>';
  pokeHTML += '<img src = " ' + pokeData.sprites.front_default + ' "/>';
  pokeHTML += '<p>' + pokeData.name + '</p>';
  pokeHTML += '</li>';

  $('.pokemon-list').append(pokeHTML);

}

//* Get JSON
$.getJSON(pokeAPI[0], pokeOptions, pokeDisplay);
$.getJSON(pokeAPI[1], pokeOptions, pokeDisplay);
$.getJSON(pokeAPI[2], pokeOptions, pokeDisplay);
$.getJSON(pokeAPI[3], pokeOptions, pokeDisplay);
$.getJSON(pokeAPI[4], pokeOptions, pokeDisplay);
$.getJSON(pokeAPI[5], pokeOptions, pokeDisplay);
$.getJSON(pokeAPI[6], pokeOptions, pokeDisplay);
$.getJSON(pokeAPI[7], pokeOptions, pokeDisplay);
$.getJSON(pokeAPI[8], pokeOptions, pokeDisplay);
Caleb Schmidt
.a{fill-rule:evenodd;}techdegree seal-36
Caleb Schmidt
Front End Web Development Techdegree Graduate 18,686 Points

Hey Christian. I have a question for you, as I am also on this project and I decided to use the Spotify API as well. I am just trying to make a gallery of specific albums, but my code is only outputting a basic HTML list (No album art or Artist names). My jQuery/AJAX looks like this: 

          $(document).ready( function() {
    var spotifyAPI = "https://api.spotify.com/v1/albums/?ids=59xqFRG2IgFTsZtQ73yIp6,6JWc4iAiJ9FjyK0B59ABb4,6UXCm6bOO4gFlDQZV5yL37";
    $.getJSON(spotifyAPI, function (albumData) {
        console.log(albumData);
        var albumHTML = '<ul>'
        $.each(albumData.albums, function (i, eachAlbum) {
            albumHTML += '<li>';
            albumHTML += '<img src="' + eachAlbum.images.url + '">';
            albumHTML += '<p>' + eachAlbum.artists.name + '</p></li>';
        }); //end loop

        albumHTML += '</ul>';
        $('#main-gallery').html(albumHTML);

    }); //end getJSON

}); //end ready

Any help would be greatly appreciated! Thank you.

Caleb Schmidt
.a{fill-rule:evenodd;}techdegree seal-36
Caleb Schmidt
Front End Web Development Techdegree Graduate 18,686 Points

I kept working at it and figured it out. I was using dot notation exclusively, trying to access values inside arrays. I needed to also use bracket notation.