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.

JavaScript Displaying the Content

Matt Wright
seal-mask
.a{fill-rule:evenodd;}techdegree seal-36
Matt Wright
Front End Web Development Techdegree Graduate 14,557 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.

Daniel L.
Daniel L.
9,882 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.

Daniel Cranney
Daniel Cranney
11,599 Points

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