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 Mohamed7,373 Points
data.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
William Mead9,937 Points
The 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 Parker228,978 Points
You'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 Mohamed7,373 Points
steve 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
just 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