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,754 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
10,394 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;
}