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
Neil Bircumshaw
Full Stack JavaScript Techdegree Student 14,597 PointsNeed 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
229,608 PointsYou 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
Full Stack JavaScript Techdegree Student 14,597 PointsYeah 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
Full Stack JavaScript Techdegree Student 14,597 PointsTried 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
Full Stack JavaScript Techdegree Student 14,597 PointsI'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
229,608 PointsSo 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
Full Stack JavaScript Techdegree Student 14,597 PointsOkay! 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
Full Stack JavaScript Techdegree Student 14,597 PointsNevermind, 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
229,608 PointsOr to avoid a hanging comma at the end:
for(i = 0; i < datas.moves.length; i++){
infoHTML += (i>0 ? ", " : "") + datas.moves[i].move.name;
}
Neil Bircumshaw
Full Stack JavaScript Techdegree Student 14,597 PointsThank you for all your help as usual Steven, couldn't do this without you! :D