Getting error stating "data.map is not a function

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

make sure you are fetching https://dog.ceo/api/breeds/list and not https://dog.ceo/api/breeds/list/all

Nevermind...I figured it out. Didn't have .message included in my .then statement.

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.

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