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 trialYeukai Patience Shiripinda
8,067 Pointsdata.map is not a function
When i follow Guil's example after creating the get options function i am getting the following error message printed in the console
app.js:25 Uncaught (in promise) TypeError: data.map is not a function
May you kindly advise me on what could be the issue here .The link to my workspace snapshot is http://w.trhou.se/l8mc4w0qpv
2 Answers
Juan Luna Ramirez
9,038 PointsThe generateOptions
function expects the argument for its data
parameter to be an array. So on line 15 it looks like data.message
is returning an object which looks something like {affenpinscher: [], african: [], ...}
. You are getting the error since there is not a map
function on objects. However there is a way to get all the keys, values, or both in an array. I'm assuming you want the keys in an array. For that we can use the keys
function in the mama Object like so: Object.keys(data.message)
. This will return an array that looks something like `["affenspinscher", "african", ...]. Now your generateOptions function should work as expected.
I don't have access to the video, but maybe this dog API changed since it was recorded.
Sidou Fifa
Courses Plus Student 2,986 PointsThis worked! Here is my code
fetch ('https://dog.ceo/api/breeds/list/all')
.then (response => response.json())
.then ( data => generateOptions(Object.keys(data.message)));
function generateOptions(data){
const options = data.map(item => `
<option value='${item}'>${item}</option>
`);
select.innerHTML = options;
}
Blake Larson
13,014 PointsI haven't done this track, but the data
being passed in is an object so something like this would work.
function generateOptions(data) {
let options = "<option></option>";
for (const property in data) {
data[property].map(breed => {
options = options + `<option value='${breed}'>${breed}</option>`
}
);
}
select.innerHTML = options;
}
Uses a for in loop to loop through the object keys and then map each key creating an option
element and concats to the options
variable.
David Hilleke
4,741 PointsCould we use the spread operator in here somehow to make it look a little cleaner?
Juan Luna Ramirez
9,038 PointsDavid, I'm not sure how the spread operator can help here. Did you have something in mind?
Henry Blandon
Full Stack JavaScript Techdegree Graduate 21,521 PointsHenry Blandon
Full Stack JavaScript Techdegree Graduate 21,521 PointsYour are not using the same url. what you have in your workspace is: (https://dog.ceo/api/breeds/list/all) what Guil in the video used is this: (https://dog.ceo/api/breeds/list) you can find the link in the teacher's notes in the 3rd video of the workshop. what you have is not really wrong is just you are getting different data and you have to do more like Blake Larson indicated below. by clicking the links you will see the difference.