Welcome to the Treehouse Community

The Treehouse Community is a meeting place for developers, designers, and programmers of all backgrounds and skill levels to get support. Collaborate here on code errors or bugs that you need feedback on, or asking for an extra set of eyes on your latest project. Join thousands of Treehouse students and alumni in the community today. (Note: Only Treehouse students can comment or ask questions, but non-students are welcome to browse our conversations.)

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and a supportive community. Start your free trial today.

JavaScript Displaying the Content

data.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

Henry Blandon
seal-mask
.a{fill-rule:evenodd;}techdegree seal-36
Henry Blandon
Full Stack JavaScript Techdegree Graduate 21,448 Points

Your 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.

2 Answers

Juan Luna Ramirez
Juan Luna Ramirez
8,985 Points

The 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.

This 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
Blake Larson
12,932 Points

I 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
David Hilleke
4,740 Points

Could we use the spread operator in here somehow to make it look a little cleaner?

Juan Luna Ramirez
Juan Luna Ramirez
8,985 Points

David, I'm not sure how the spread operator can help here. Did you have something in mind?