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 Create a Reusable Fetch Function

Mitchell Wintrow
Mitchell Wintrow
4,380 Points
Posted by Mitchell Wintrow
Mitchell Wintrow
4,380 Points

app.js:24 Uncaught (in promise) TypeError: Cannot read properties of undefined (reading 'map') app.js:14

I continuously get the above listed errors for lines 24 and 14, but why? I literally rewatched the whole video and checked my work with it, and I don't see any errors, particularly not with line 24 or 14. I double checked and then checked again, I feel pretty confident that my code is the same as the video, but it still gives me the same error and everything disappears from the drop down select breed menu. Can someone please help me? I don't want to move on until I know what the problem is. Here is my code:

const select = document.getElementById('breeds');
const card = document.querySelector('.card'); 
const form = document.querySelector('form');

// ------------------------------------------
//  FETCH FUNCTIONS
// ------------------------------------------
function fetchData(url) {
  return fetch(url)
    .then(res => res.json())
}

fetch('https://dog.ceo/api/breeds/list')
  .then(data => generateOptions(data.message))      // This is line 14

fetchData('https://dog.ceo/api/breeds/image/random')
  .then(data => generateImage(data.message))


// ------------------------------------------
//  HELPER FUNCTIONS
// ------------------------------------------
function generateOptions(data) {
  const options = data.map(item => `                        //This is line 24
    <option value='${item}'>${item}</option>
  `).join('');
  select.innerHTML = options;
}

function generateImage(data) {
  const html = `
    <img src="${data}" alt=>
    <p>Click to view images of ${select.value}s</p>
  `;
  card.innerHTML = html;
}

function fetchBreedImage() {
  const breed = select.value;
  const img = card.querySelector('img');
  const p = card.querySelector('p');

  fetchData(`https://dog.ceo/api/breed/${breed}/images/random`)
    .then(data => {
      img.src = data.message;
      img.alt = breed;
      p.textContent = `Click to view more {breed}s`;
    })
}


// ------------------------------------------
//  EVENT LISTENERS
// ------------------------------------------
select.addEventListener('click', fetchBreedImage);
card.addEventListener('click', fetchBreedImage);


// ------------------------------------------
//  POST DATA
// ------------------------------------------

Also, not sure if it matters or not but this is the other error I get in the console:

DevTools failed to load source map: Could not load content for http://port-80-a2t9wdhx90.treehouse-app.com/css/styles.css.map: HTTP error: status code 404, net::ERR_HTTP_RESPONSE_CODE_FAILURE

Mitchell Wintrow
Mitchell Wintrow
4,380 Points
Mitchell Wintrow
Mitchell Wintrow
4,380 Points

🤣🤣🤣 Wow, I see now that I needed fetchData on line 13, instead of fetch. I kept overlooking it though because it told me the error was at line 14, not 13. I wonder why it was telling me line 14? Maybe if someone can help explain that to me I would appreciate it very much. Like is it because that's where the actual code block is or something? Just trying to understand. Thanks everyone! I love Treehouse and I'm hooked lol, I learn on here every day.

2 Answers

Jason Larson
Jason Larson
8,361 Points

There error shows that it happened on line 14/24 because that is where the error occurred. It errored on 24 when it tried to perform the map method on an array that was undefined, and line 14 was where the generateOptions function was called, and where the undefined data was passed from. The fact that you used the wrong function (fetch vs fetchData) isn't an actual error because the system is running fetch, but it just doesn't return anything back into data. It's up to you as the developer to determine the cause of data being undefined, which as you discovered, was using the wrong function.

Mitchell Wintrow
Mitchell Wintrow
4,380 Points
Mitchell Wintrow
Mitchell Wintrow
4,380 Points

Thank you Jason Larson! I understand that it's up to me, but I also understand that there's no reason not to ask or discuss things either. I'm learning all of this by myself in my free time while working 3 jobs and raising my son, so sometimes I like to converse with people because it helps me to learn. Even just writing out the question and posting it helps me find the answer sometimes, even if nobody answers(I teach English and reread my messages to make sure everything is correct, that's usually when I find errors haha). I appreciate you writing back to me and I hope you have a great day and learn new things everyday!

Jason Larson
Jason Larson
8,361 Points

I didn't mean to imply that you shouldn't ask or discuss things. I just meant that there are certain things that the system can't determine programmatically because they are not exactly errors in the runtime or at compilation, but errors perhaps in the way we write things that cause the system to return results that we don't expect. As developers, we cause all sorts of problems for ourselves that are often hard to find because we look right at it and don't see it. Then someone else looks at it for 2 seconds and can spot the problem that we overlooked 20 times. It's a little bit like becoming "nose-blind" to a smell because we've noticed it too many times for it to register as a problem.

Mitchell Wintrow
Mitchell Wintrow
4,380 Points
Mitchell Wintrow
Mitchell Wintrow
4,380 Points

Very well put Jason Larson ! I like your analogy of being "nose-blind" to smell, that is probably one of the most accurate ways I've heard somebody describe that. It's very true too, I can't even tell you how many times I've been scanning through my code to find the errors and skipped right past them over and over again. Then when I come back later, it's usually one of the first things I notice haha("why don't I have ); after the } in that callback?"). I just went through the same thing this morning actually haha. I could not find the error for the life of me, and then I took a break for a while, and when I came back I thought "why is there an empty string there? Shouldn't there be GET there?" as I reviewed the code again. Plugged in GET and bam! Worked like a charm lol. Hope you're doing well Jason!

Benjamin Sadler
Benjamin Sadler
6,679 Points
Benjamin Sadler
Benjamin Sadler
6,679 Points

Thank you! this fixed my issue.