Welcome to the Treehouse Community

The Treehouse Community is a meeting place for developers, designers, and programmers of all backgrounds and skill levels to get support. Collaborate here on code errors or bugs that you need feedback on, or asking for an extra set of eyes on your latest project. Join thousands of Treehouse students and alumni in the community today. (Note: Only Treehouse students can comment or ask questions, but non-students are welcome to browse our conversations.)

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and a supportive community. Start your free trial today.

JavaScript

Neil Bircumshaw
seal-mask
.a{fill-rule:evenodd;}techdegree
Neil Bircumshaw
Full Stack JavaScript Techdegree Student 14,597 Points

Need help accessing this data.

Okay this is alot of code, but all I want is to gather the names of the moves, not from what game there from or at what level the pokemon gets the move. So for example I'd want a list of the moves like "razor-wind", "gust". I'd just like to know how to access them as I'm doing a AJAX request with this data to present it on the webpage for the application I'm doing.

"name": "butterfree",
    "weight": 320,
    "moves": [
        {
            "version_group_details": [
                {
                    "move_learn_method": {
                        "url": "http://www.pokeapi.co/api/v2/move-learn-method/4/",
                        "name": "machine"
                    },
                    "level_learned_at": 0,
                    "version_group": {
                        "url": "http://www.pokeapi.co/api/v2/version-group/2/",
                        "name": "yellow"
                    }
                },
                {
                    "move_learn_method": {
                        "url": "http://www.pokeapi.co/api/v2/move-learn-method/4/",
                        "name": "machine"
                    },
                    "level_learned_at": 0,
                    "version_group": {
                        "url": "http://www.pokeapi.co/api/v2/version-group/1/",
                        "name": "red-blue"
                    }
                }
            ],
            "move": {
                "url": "http://www.pokeapi.co/api/v2/move/13/",
                "name": "razor-wind"
            }
        },
        {
            "version_group_details": [
                {
                    "move_learn_method": {
                        "url": "http://www.pokeapi.co/api/v2/move-learn-method/1/",
                        "name": "level-up"
                    },
                    "level_learned_at": 28,
                    "version_group": {
                        "url": "http://www.pokeapi.co/api/v2/version-group/12/",
                        "name": "colosseum"
                    }
                },
                {
                    "move_learn_method": {
                        "url": "http://www.pokeapi.co/api/v2/move-learn-method/1/",
                        "name": "level-up"
                    },
                    "level_learned_at": 16,
                    "version_group": {
                        "url": "http://www.pokeapi.co/api/v2/version-group/11/",
                        "name": "black-white"
                    }
                },
                {
                    "move_learn_method": {
                        "url": "http://www.pokeapi.co/api/v2/move-learn-method/1/",
                        "name": "level-up"
                    },
                    "level_learned_at": 16,
                    "version_group": {
                        "url": "http://www.pokeapi.co/api/v2/version-group/10/",
                        "name": "heartgold-soulsilver"
                    }
                },
                {
                    "move_learn_method": {
                        "url": "http://www.pokeapi.co/api/v2/move-learn-method/1/",
                        "name": "level-up"
                    },
                    "level_learned_at": 16,
                    "version_group": {
                        "url": "http://www.pokeapi.co/api/v2/version-group/9/",
                        "name": "platinum"
                    }
                },
                {
                    "move_learn_method": {
                        "url": "http://www.pokeapi.co/api/v2/move-learn-method/1/",
                        "name": "level-up"
                    },
                    "level_learned_at": 16,
                    "version_group": {
                        "url": "http://www.pokeapi.co/api/v2/version-group/8/",
                        "name": "diamond-pearl"
                    }
                },
                {
                    "move_learn_method": {
                        "url": "http://www.pokeapi.co/api/v2/move-learn-method/1/",
                        "name": "level-up"
                    },
                    "level_learned_at": 28,
                    "version_group": {
                        "url": "http://www.pokeapi.co/api/v2/version-group/7/",
                        "name": "firered-leafgreen"
                    }
                },
                {
                    "move_learn_method": {
                        "url": "http://www.pokeapi.co/api/v2/move-learn-method/1/",
                        "name": "level-up"
                    },
                    "level_learned_at": 28,
                    "version_group": {
                        "url": "http://www.pokeapi.co/api/v2/version-group/6/",
                        "name": "emerald"
                    }
                },
                {
                    "move_learn_method": {
                        "url": "http://www.pokeapi.co/api/v2/move-learn-method/1/",
                        "name": "level-up"
                    },
                    "level_learned_at": 28,
                    "version_group": {
                        "url": "http://www.pokeapi.co/api/v2/version-group/5/",
                        "name": "ruby-sapphire"
                    }
                },
                {
                    "move_learn_method": {
                        "url": "http://www.pokeapi.co/api/v2/move-learn-method/1/",
                        "name": "level-up"
                    },
                    "level_learned_at": 28,
                    "version_group": {
                        "url": "http://www.pokeapi.co/api/v2/version-group/4/",
                        "name": "crystal"
                    }
                },
                {
                    "move_learn_method": {
                        "url": "http://www.pokeapi.co/api/v2/move-learn-method/1/",
                        "name": "level-up"
                    },
                    "level_learned_at": 28,
                    "version_group": {
                        "url": "http://www.pokeapi.co/api/v2/version-group/3/",
                        "name": "gold-silver"
                    }
                },
                {
                    "move_learn_method": {
                        "url": "http://www.pokeapi.co/api/v2/move-learn-method/1/",
                        "name": "level-up"
                    },
                    "level_learned_at": 16,
                    "version_group": {
                        "url": "http://www.pokeapi.co/api/v2/version-group/16/",
                        "name": "omega-ruby-alpha-sapphire"
                    }
                },
                {
                    "move_learn_method": {
                        "url": "http://www.pokeapi.co/api/v2/move-learn-method/1/",
                        "name": "level-up"
                    },
                    "level_learned_at": 16,
                    "version_group": {
                        "url": "http://www.pokeapi.co/api/v2/version-group/15/",
                        "name": "x-y"
                    }
                },
                {
                    "move_learn_method": {
                        "url": "http://www.pokeapi.co/api/v2/move-learn-method/1/",
                        "name": "level-up"
                    },
                    "level_learned_at": 16,
                    "version_group": {
                        "url": "http://www.pokeapi.co/api/v2/version-group/14/",
                        "name": "black-2-white-2"
                    }
                },
                {
                    "move_learn_method": {
                        "url": "http://www.pokeapi.co/api/v2/move-learn-method/1/",
                        "name": "level-up"
                    },
                    "level_learned_at": 28,
                    "version_group": {
                        "url": "http://www.pokeapi.co/api/v2/version-group/13/",
                        "name": "xd"
                    }
                },
                {
                    "move_learn_method": {
                        "url": "http://www.pokeapi.co/api/v2/move-learn-method/1/",
                        "name": "level-up"
                    },
                    "level_learned_at": 28,
                    "version_group": {
                        "url": "http://www.pokeapi.co/api/v2/version-group/2/",
                        "name": "yellow"
                    }
                }
            ],
            "move": {
                "url": "http://www.pokeapi.co/api/v2/move/16/",
                "name": "gust"
            }
        },

7 Answers

Steven Parker
Steven Parker
216,135 Points

You should be able to iterate through this structure.

If you convert the data shown here to a JavaScript object (by parsing incoming JSON or by enclosing it in braces to make it an object literal) you can iterate the names with something like this:

for (m of myObject.moves) {
  ul.innerHTML += `<li>${m.move.name}</li>`;
}

Also note that the data above is incomplete — it ends in a comma and the brackets are not all paired.


Did you resolve your previous issue using the API? If so, please update your question with the solution for the benefit of other students.

Neil Bircumshaw
seal-mask
.a{fill-rule:evenodd;}techdegree
Neil Bircumshaw
Full Stack JavaScript Techdegree Student 14,597 Points

Yeah I did resolve and I've put that in my previous question, thanks for the reminder :) See I tried this bit of code but it didn't pan out. What I was trying to do was loop through and find all the moves and have the names of the moves written on the page like this (just focus on the for loop)

function displayInfo(datas) {


var infoHTML = "<div class='album-wrap pokeCard'>" + 
"Pokemon name:  " + datas.name + "<br>" + "Average weight:  " + 
datas.weight/10 + "  kg" + '<img class = "pokeimg" src="' + 
datas.sprites.front_default + '"alt="Pokemon" height="200" width="200">'  + 
"</div>";

for (i = 0; i < datas.move.moves.name.length; i++) {
    infoHTML += datas.move.moves.name[i];
    }

$(".main-content").html(infoHTML);
}

$.getJSON(pokeAPI,displayInfo); 

})

that info I listed is what is from the pokeAPI website, it is already in that structured format.

Neil Bircumshaw
seal-mask
.a{fill-rule:evenodd;}techdegree
Neil Bircumshaw
Full Stack JavaScript Techdegree Student 14,597 Points

Tried this, I was sure it was going to work haha, going to keep trying

$.each(datas.moves, function(i, moveName){
infoHTML += moveName.move.name; 
});

}

$(".main-content").html(infoHTML);
Neil Bircumshaw
seal-mask
.a{fill-rule:evenodd;}techdegree
Neil Bircumshaw
Full Stack JavaScript Techdegree Student 14,597 Points

I'm so close, if I simply put in datas.moves[0].move.name into the concatenated string like this

var infoHTML = "<div class='album-wrap pokeCard'>" + 
"Pokemon name:  " + datas.name + "<br>" + "Average weight:  " + 
datas.weight/10 + "  kg" + '<img class = "pokeimg" src="' + 
datas.sprites.front_default + '"alt="Pokemon" height="200" width="200">' +"<br>" + datas.moves[0].move.name + 
"</div>";

it works and brings me the first move, but I want to be able to go through and list as many moves as there are for that particular Pokemon, so I know I'll need a loop, just figuring out how to do that, then I'll be able to do the same with type of pokemon - because some have one type, others have multiple.

Steven Parker
Steven Parker
216,135 Points

So mixing in my previous suggestion would give you this:

var infoHTML = "<div class='album-wrap pokeCard'>" +
  "Pokemon name:  " + datas.name + "<br>" +
  "Average weight:  " + datas.weight / 10 + "  kg" +
  '<img class = "pokeimg" src="' + datas.sprites.front_default + '"alt="Pokemon" height="200" width="200">';
for (m of datas.moves) {
  infoHTML += "<br>" + m.move.name;
}
infoHTML += "</div>";
Neil Bircumshaw
seal-mask
.a{fill-rule:evenodd;}techdegree
Neil Bircumshaw
Full Stack JavaScript Techdegree Student 14,597 Points

Okay! I finally figured it out

var infoHTML = "<div class='album-wrap pokeCard'>" + 
"Pokemon name:  " + datas.name + "<br>" + "Average weight:  " + 
datas.weight/10 + "  kg" + '<img class = "pokeimg" src="' + 
datas.sprites.front_default + '"alt="Pokemon" height="200" width="200">' +"<br>" + 
"</div>";


for(i = 0; i < datas.moves.length; i++){
    infoHTML += datas.moves[i].move.name;
    }

So yeah this is great and all, it gives me a long list of all the moves a pokemon can learn...although one problem, it ends up looking like this for example

" headbutttacklebody-slamtake-downthrashdouble-edgeleerbiteroarflamethrowerwater-gunhydro-pumpsurfice-beamblizzardbubble-beamhyper-beamstrengthdragon-ragethunderboltthunder-wavethunderearthquaketoxicragemimicdouble-teamreflectbidefire-blastwaterfallskull-bashrestsubstitutesnorecursespiteprotectzap-cannonicy-windoutragesandstormendureswaggerattractsleep-talkreturnfrustrationdragon-breathiron-tailhidden-powertwisterrain-dancecrunchrock-smashwhirlpooluproarhailtormentfacadetauntsecret-powerdivebouncedragon-dancewater-pulsebrinenatural-giftpaybackdark-pulseaqua-taildragon-pulsegiga-impactavalancheice-fangiron-headstone-edgecaptivateroundscaldincineratebulldozedragon-tailconfide"

It's not spaced at all and is super hard to read, is there any way to separate the data that's been returned would you know Steven?

Neil Bircumshaw
seal-mask
.a{fill-rule:evenodd;}techdegree
Neil Bircumshaw
Full Stack JavaScript Techdegree Student 14,597 Points

Nevermind, I got it! just a bit more concatenation lol

for(i = 0; i < datas.moves.length; i++){
    infoHTML += datas.moves[i].move.name + ",   ";
    }
Steven Parker
Steven Parker
216,135 Points

Or to avoid a hanging comma at the end:

for(i = 0; i < datas.moves.length; i++){
    infoHTML += (i>0 ? ", " : "") + datas.moves[i].move.name;
}