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 trialAhmad Alshaar
10,193 Pointsdata.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.
Ahmad Alshaar
10,193 Pointsconst 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
7,806 PointsI 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
8,040 PointsI 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
6,145 Pointsthx, same worked for me.
Tomasz Denkiewicz
11,778 PointsThe problem is syntax error in first fetch function you have missing brackets in json method on response object
Ahmad Alshaar
10,193 PointsHello 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
Cheo R
37,150 PointsCheo R
37,150 PointsCan you post your code.