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

JavaScript Displaying the Content

Matt Wright
seal-mask
.a{fill-rule:evenodd;}techdegree seal-36
Matt Wright
Front End Web Development Techdegree Graduate 14,558 Points

Getting 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
Daniele Fusari
40,669 Points

Hi 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;
}
Brian Driscoll
Brian Driscoll
4,969 Points

Weird 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.
Danny L.
10,837 Points

Yeah, 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.

I 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;
}