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.
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,936 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 Parker217,639 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