JavaScript Displaying the Content

Richard Preske
PLUS
Richard Preske
Courses Plus Student 4,355 Points

Lost

https://w.trhou.se/wi7na0dbp9

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
Steven Parker
206,336 Points

The "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
Richard Preske
Courses Plus Student 4,355 Points

Thanks 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
Steven Parker
206,336 Points

That'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
Steven Parker
206,336 Points

Odd, 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:

  • "options" should not be constant (so it can be added to)
  • the loop should add an option each cycle
  • the generated string should still create <option> elements as it did before
  • the select should only be populated after the loop finishes
Steven Parker
Steven Parker
206,336 Points

For the options to accumulate, "options" must be declared before the loop. Also, the current option is represented by the "property", not the "data".

function generateOptions(data) {
  let options = "";
  for (const property in data) {
    options += `<option value='${property}'>${property}</option>`;
  }
  select.innerHTML = options;
}
Richard Preske
PLUS
Richard Preske
Courses Plus Student 4,355 Points

For 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
Richard Preske
Courses Plus Student 4,355 Points

https://w.trhou.se/4js7ienj1q

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

Henry Blandon
seal-mask
.a{fill-rule:evenodd;}techdegree
Henry Blandon
Full Stack JavaScript Techdegree Student 14,450 Points

Richard 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;
}