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 trialRichard Preske
Courses Plus Student 4,356 PointsLost
data.map is not a function error? Also, when I remove the curly braces on data.map it still gives the same error.
4 Answers
Steven Parker
231,172 PointsThe "map" method is found on arrays. But using the browser dev tools, you can examine the argument being passed in and see that it is an object and not an array.
The array attributes do seem to contain the info you want, though, so I'm wondering if the API provider has made some changes. You might want to check their documentation.
And since the info seems to be there in another form, it should be possible to re-write the function to work with the object.
Richard Preske
Courses Plus Student 4,356 PointsFor some reason, the snapshot is not working so I pasted my code below. I get no errors but I get no drop down options menu:
const select = document.getElementById('breeds'); const card = document.querySelector('.card'); const form = document.querySelector('form');
// ------------------------------------------ // FETCH FUNCTIONS // ------------------------------------------ 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) )
// ------------------------------------------
// HELPER FUNCTIONS
// ------------------------------------------
function generateOptions(data) {
// const options = data.map(item =>
// <option value='${item}'>${item}</option>
//
).join('');
for (const property in data) {
const options = (${property}: ${data[property]}
);
select.innerHTML = options;
}
}
function generateImage(data) {
const html =
<img src = '${data}' alt>
<p>Click to view image of ${select.value}</p>
;
card.innerHTML = html;
}
Richard Preske
Courses Plus Student 4,356 PointsHere is what I got so far, no errors but it just shows {object}{object} in drop down option menu. Thanks for your help. Just wondering if you could give me one line of code for this to start. Thanks.
Richard Preske
Courses Plus Student 4,356 PointsThanks, always have the best answer.
Henry Blandon
Full Stack JavaScript Techdegree Graduate 21,521 PointsRichard Preske, I looked at your code you posted on april 29 and I just removed the bracket on the generateOptions function and i used this url (https://dog.ceo/api/breeds/list) then it works fine.
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 image of ${select.value}</p>
`;
card.innerHTML = html;
}
Henry Blandon
Full Stack JavaScript Techdegree Graduate 21,521 PointsI already explained a little about the url on other similar question here.
Richard Preske
Courses Plus Student 4,356 PointsRichard Preske
Courses Plus Student 4,356 PointsThanks again, great answers. This is the JSON data https://dog.ceo/dog-api/documentation/ This is an object of arrays, correct? So data.map won't work because the JSON is an object of arrays?
Steven Parker
231,172 PointsSteven Parker
231,172 PointsThat's right, I believe at this point you only want the major breeds, so you might use a "for in" loop to gather all the attribute names (disregarding the arrays of sub-breeds).
Steven Parker
231,172 PointsSteven Parker
231,172 PointsOdd, the snapshot worked fine last time. When posting code directly, always use Markdown formatting or it can be hard to read and may appear incorrectly.
But I think i see the issues:
Steven Parker
231,172 PointsSteven Parker
231,172 PointsFor the options to accumulate, "options" must be declared before the loop. Also, the current option is represented by the "property", not the "data".