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 trialMatt Wright
Front End Web Development Techdegree Graduate 14,558 PointsGetting error stating "data.map is not a function
This is the text of the error in the console : app.js:21 Uncaught (in promise) TypeError: data.map is not a function
I have tried changing the url as others have stated and have even copied the code from the project files.
Here is a link to my work space: https://teamtreehouse.com/workspaces/41481655
6 Answers
Daniele Fusari
40,669 PointsHi Matt,
You need to change the object to an array using Object.keys(data); see below.
function generateOptions(data){
const options = Object.keys(data).map(item => `
<option value='${item}'>${item}</option>
`);
select.innerHTML = options;
}
Sean Paulson
6,669 Pointsmake sure you are fetching https://dog.ceo/api/breeds/list and not https://dog.ceo/api/breeds/list/all
Matt Wright
Front End Web Development Techdegree Graduate 14,558 PointsNevermind...I figured it out. Didn't have .message included in my .then statement.
Brian Driscoll
4,969 PointsWeird how this worked on the workspace but when implementing it on my own program it didn't work! Daniele's answer worked for me. Was wondering why I kept receiving and object and not an array.
Danny L.
10,837 PointsYeah, this didn't work for me when downloading the files either. So weird, but just like Brian said, Daniele's answer worked for me too.
Daniel Cranney
11,609 PointsI WISH Treehouse would update this and all of the Asynchoronous course materials because NONE of it works as it should.
So, I've tried implementing the solution given by Daniele, and it just gives me a list of numbers in the options. SO frustrating, it's making me want to leave Treehouse because they just don't seem to care that these courses are inaccurate and extremely hard to fix.
fetch('https://dog.ceo/api/breeds/list')
.then(response => response.json() )
.then(data => generateOptions(data.message) );
fetch('https://dog.ceo/api/breeds/image/random')
.then( response => response.json() )
.then( data => generateImage(data.message) )
// ------------------------------------------
// HELPER FUNCTIONS
// ------------------------------------------
function generateOptions(data){
const options = Object.keys(data).map(item => `
<option value='${item}'>${item}</option>
`);
select.innerHTML = options;
}
function generateImage(data) {
const html = `
<img src='${data}' alt>
<p>Click to view images of ${select.value}s</p>
`;
card.innerHTML = html;
}