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
issa Mohamed
7,373 Pointsdata.map is not a function error
Please need help I have followed the code in the video however am getting an error on the console.log saying data.map is not a function this is at the part of the code when we try to use the data from the api breeds list and put it intooptions on the select menu. I have found few threads that stated because the json file is an object and not an array the data.map function doesnt work I have changed the code into using key:value iteration like its done for objects by copying a solution posted here but it is still not working for me am still used to this so if am not making any sense can anyone help me out
5 Answers
William Mead
9,937 PointsThe dog api website has changed and they are now listing a different URL for the breeds, which generates a message, which is an object, not an array. If you use the endpoint shown in the video, it will work.
This is a downside to using these external resources in these lessons. They can change without any warning, and the videos no longer match the resources.
Steven Parker
229,644 PointsYou're quite right that the JSON conversion yields an object and not an array. So taking a guess about your code, I'm wondering if this might explain your issue:
.then(data => generateOptions(data)) // did you pass the data object itself?
.then(data => generateOptions(data.message)) // but this ARRAY is passed in the video
issa Mohamed
7,373 Pointsas the video progresses they add promise.all in
steve are you saying i should change
const breedList = data[0].message; const randomImage = data[1].message;
generateOptions(breedList); generateImage(randomImage);
to your solution then(data => generateOptions(data)) and not .then(data => generateOptions(data.message)) sorry if am confusing you tryna wrap my head around it all
Steven Parker
229,644 PointsThe "Watch Video" button on this page is linked to an earlier video, which was the basis of my guess.
But now that I see the actual code, on line 37 you have "Promise.ok" but the video code shows "response.ok" instead.
Also, on lines 11 and 36 you have "checkStatues" instead of "checkStatus", and on line 40 you have "statuesText" instead of "statusText". The first one isn't a problem since both names match, and the second one doesn't get used unless there is an error.
issa Mohamed
7,373 Pointskris here it is https://w.trhou.se/a9vzfxazab
issa Mohamed
7,373 Pointssteve your a legend thanks man one more thing the random image dont work is it cause the api link isnt working and also error on line 67 img.src = data.message; it says on the console Uncaught (in promise) TypeError: Cannot read property 'message' of undefined at app.js:67
Steven Parker
229,644 PointsAfter making the fixes I mentioned before, everything seems to be working, including the random image. Perhaps a new typo was accidentally introduced?
If your original question is resolved, you can mark a question solved by choosing a "best answer".
And happy coding!
Sorin Chircu
45,432 Pointsjust change this: .then( data => generateOptions(data) ) into THIS: .then( data => generateOptions(data.message) )
no longer a list but an object containing the list value for 'message' key
KRIS NIKOLAISEN
54,967 PointsKRIS NIKOLAISEN
54,967 PointsIf you are using a workspace can you post a snapshot? Click the camera icon in the upper right corner, then 'Take Snapshot' then post the link created here.