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
Henry Blandon
Full Stack JavaScript Techdegree Student 14,450 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

Blake Larson
Blake Larson
12,876 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.

Juan Luna Ramirez
Juan Luna Ramirez
8,930 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.