"data.map is not a function" still not fixed

Question

In the Displaying The Content module for the Fetch API course I'm getting the same "data.mpa is not a function" error a lot of other people are experiencing. My fetch url is correct so I'm not sure what the issue is.

const select = document.getElementById('breeds');
const card = document.querySelector('.card'); 
const form = document.querySelector('form');

// ------------------------------------------
//  FETCH FUNCTIONS
// ------------------------------------------

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 => generateOptions(data.message))


// ------------------------------------------
//  HELPER FUNCTIONS
// ------------------------------------------

function generateOptions(data) {
  const options = 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;
}

// ------------------------------------------
//  EVENT LISTENERS
// ------------------------------------------



// ------------------------------------------
//  POST DATA
// ------------------------------------------

Any ideas?

Answer 1 · 2021-09-26T18:46:24Z

September 26, 2021 6:46pm

tl;dr

You used generateOptions instead of generateImage after fetching the random image url and there is no map function on a string.

fetch('https://dog.ceo/api/breeds/image/random')
  .then(response => response.json())
  .then(data => generateOptions(data.message)) //<= this should be generateImage

Debugging

It might be worth mentioning how you could go about debugging this type of situation because it is likely you'll come across this often during development.

Whenever I see a type error like this, the first thing I do is double check to make sure the data type is what I'm expecting it to be (i.e string, array, objects, etc). So in this case I know from experience that map is a function on arrays. If I didn't know which data types I could use map with, I would simply search for some documentation that explains which data types I can use it on.

My thought is, "maybe the api is broken and no data is being returned... maybe the api changed and I'm getting an object, or something else, instead of an array... or maybe I made a mistake somewhere in my code..."

Easiest way to see the data is to log it to the console. So I ran the following code in https://jsbin.com/ to double check the data. I would probably also look at the API's documentation https://dog.ceo/dog-api/documentation/ and see what they say the response should be. Regardless I still want to check what is actually being returned from the fetch call.

fetch("https://dog.ceo/api/breeds/list")
  .then((response) => response.json())
  .then((data) => {
    console.log("breed list: ", data.message); // shows an array
    generateOptions(data.message);
  });

fetch("https://dog.ceo/api/breeds/image/random")
  .then((response) => response.json())
  .then((data) => {
    console.log("random image url: ", data.message); // shows a string
    generateOptions(data.message);
  });

I noticed that everything seems as expected where the list of breeds is an array and the random image url is a string. So then I look how I'm using this data.

The breed list is passed to generateOptions which then uses map on it. You could also console log the result of creating those options to make sure nothing else is wrong here but I was confident that this should work.

Then I saw that the string url is also passed to generateOptions which then uses map on it. Aha, can't use map on a string so this must be the mistake. Then I saw this other function that looks like the one that should have been used instead. After fixing this everything might work as expected or you may get new errors but this is a lot of what you have to do during development.

Welcome to the Treehouse Community

Looking to learn something new?

dishwasher

dishwasher

"data.map is not a function" still not fixed

1 Answer

Juan Luna Ramirez

Juan Luna Ramirez

tl;dr

Debugging