Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

JavaScript Displaying the Content

Ahmad Alshaar
Ahmad Alshaar
10,193 Points
Posted by 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
Cheo R
Cheo R
37,150 Points

Can you post your code.

Ahmad Alshaar
Ahmad Alshaar
10,193 Points
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,806 Points
Heidi Vasterling-Ford
Heidi Vasterling-Ford
7,806 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
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!

marcmarcmarc
marcmarcmarc
6,145 Points

thx, same worked for me.

Tomasz Denkiewicz
Tomasz Denkiewicz
11,778 Points
Tomasz Denkiewicz
Tomasz Denkiewicz
11,778 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
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