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 trial

JavaScript Displaying the Content

Richard Preske
PLUS
Richard Preske
Courses Plus Student 4,356 Points
Posted by Richard Preske
Richard Preske
Courses Plus Student 4,356 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
229,786 Points
Steven Parker
Steven Parker
229,786 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,356 Points
Richard Preske
Richard Preske
Courses Plus Student 4,356 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
229,786 Points
Steven Parker
Steven Parker
229,786 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
229,786 Points
Steven Parker
Steven Parker
229,786 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
229,786 Points
Steven Parker
Steven Parker
229,786 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,356 Points
Richard Preske
Richard Preske
Courses Plus Student 4,356 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,356 Points
Richard Preske
Richard Preske
Courses Plus Student 4,356 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 seal-36
Henry Blandon
Full Stack JavaScript Techdegree Graduate 21,521 Points
Henry Blandon
.a{fill-rule:evenodd;}techdegree seal-36
Henry Blandon
Full Stack JavaScript Techdegree Graduate 21,521 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;
}