JavaScript Displaying the Content

Ahmad Alshaar
Ahmad Alshaar
10,193 Points

data.map is not a function error.

hello friends, I have encountered this error in the console. and i have tried to change the code so it can accept the json array but it did not works at all

thank u.

Cheo R
Cheo R
37,150 Points

Can you post your code.

Ahmad Alshaar
Ahmad Alshaar
10,193 Points

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

fetch('https://dog.ceo/api/breeds/list/all') .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))

function generateOptions(data){ const options = data.map(item => <option value ='${item}'>${item}</option>) .join('');// we used join to remove the comma space. 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; }

Heidi Vasterling-Ford
Heidi Vasterling-Ford
7,805 Points

I am receiving the same error! Were you able to figure it out? Here is my code:

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 => generateImage(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;
}

3 Answers

Daven Hietala
Daven Hietala
8,040 Points

I changed my url from the first fetch from

fetch('https://dog.ceo/api/breeds/list/all')
  .then(response => response.json())
  .then(data => generateOptions(data.message))

to

fetch('https://dog.ceo/api/breeds/list')
  .then(response => response.json())
  .then(data => generateOptions(data.message))

This fixed my 'data.map is not a function' error.

It was an issue with the URL like Ahmad was saying.

You can do it!

thx, same worked for me.

Tomasz Denkiewicz
Tomasz Denkiewicz
11,777 Points

The problem is syntax error in first fetch function you have missing brackets in json method on response object

Ahmad Alshaar
Ahmad Alshaar
10,193 Points

Hello Heidi Vasterling-Ford I copied your code snippet and actually it worked for me I found that the problem was because of the url provided. Once i change it, it worked just fine.

If you still have the problem, I suggest you to do the following: -If you are using MAMP, make sure of the directory from the preference tab -and check it by typing "localhost" in the browser and choose the right folder directory. also,

  • visit dog.ceo website and try by pasting the provided url in the browser to check if its displaying the desired output.

I hope that my response is any useful. thank you