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

APIs Displaying the Content

issa Mohamed
issa Mohamed
7,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

If 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.

5 Answers

William Mead
William Mead
9,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 Parker
Steven Parker
231,269 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 Mohamed
issa Mohamed
7,373 Points

as 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
Steven Parker
231,269 Points

The "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
issa Mohamed
7,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

Steven Parker
Steven Parker
231,269 Points

After 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!

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