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 Asynchronous Programming with JavaScript Understanding Promises Using Fetch

Isaac Miller
Isaac Miller
4,448 Points

TypeError in console

Edit: I just realized, in the beginning of the video Guil mentions that the fetch API was introduced in ES2015, has something changed between ES2015 and ES6?

Hi all, I keep getting the following error in the console: "TypeError: Cannot read properties of undefined (reading 'map') at getProfiles (promises.js:8)"

For reference, "console.log(json)" returns the following: ƒ json() { [native code] }

I am on the 'Full-Stack JavaScript' track, the majority of the track has really been a breeze up until this course. This video in particular seems to jump around a bunch and wasn't the easiest to follow compared to all previous courses. Maybe I just got spoiled with the previous courses or some things have changed in the API's since the video has been created? My code is below, hopefully it's not too hard to read, as I became very frustrated when working through it and wasn't focused on indentation/spacing and such. I'm hoping I am just missing something simple here. Any help is much appreciated! My code is below:

const astrosUrl = 'http://api.open-notify.org/astros.json';
const wikiUrl = 'https://en.wikipedia.org/api/rest_v1/page/summary/';
const peopleList = document.getElementById('people');
const btn = document.querySelector('button');

function getProfiles(json) {
  console.log(json)
  const profiles = json.people.map( person => {
    const craft = console.log(person.craft);
    return fetch(wikiUrl + person.name)
            .then( response => response.json() )  
            .then(profile => {
              return {...profile, craft };
            })
            .catch( err => console.log( 'Error fetching Wiki:', err) )    
  }); 
  return Promise.all(profiles);
}
// Generate the markup for each profile
function generateHTML(data) {
  data.map( person => {
    const section = document.createElement('section');
    peopleList.appendChild(section);
      section.innerHTML = `
        <img src=${person.thumbnail.source}>
        <span>${person.craft}</span>
        <h2>${person.title}</h2>
        <p>${person.description}</p>
        <p>${person.extract}</p>
      `;
  });
}
btn.addEventListener('click', (event) => {
event.target.textContent = "Loading..."

  fetch(astrosUrl)
    .then( response => response.json )
    .then(getProfiles)
    .then(generateHTML )
    .catch( err => {
      peopleList.innerHTML = '<h3>Something went wrong!</h3>'
      console.log(err);
    })
    .finally( () => {
      event.target.remove();
    });
});
Julie Branyan
seal-mask
.a{fill-rule:evenodd;}techdegree
Julie Branyan
Full Stack JavaScript Techdegree Student 12,428 Points

Hi Isaac - Could you post a link to your workspace? This is a bit difficult to troubleshoot without it. If not, there is a markdown cheat sheet when posting that shows how to display the code block in a format that is easier to read. Thank you!

1 Answer

Kevin D
Kevin D
8,621 Points

It could be possible that your json variable needs to be invoked. If it's printing out ƒ json() { [native code] } when you console log it, then it seems like a function and not an object that you're expecting back.

If that assumption is correct, then the TypeError you're getting back makes sense because you're trying to call .map on a property that's undefined.

For example, if you're doing json.people.map I think this is what's happening:

  1. json exists
  2. But since you haven't invoked the function, you're just using the function declaration
  3. So when you try to access people, it doesn't exist and is undefined
  4. Which means that you're essentially doing undefined.map

Just guessing, but maybe try doing json().people.map? Hope this helps a little in your debugging journey