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 Asynchronous Programming with JavaScript Understanding Promises Handle Multiple Promises with Promise.all

Hamzah Iqbal
seal-mask
.a{fill-rule:evenodd;}techdegree
Hamzah Iqbal
Full Stack JavaScript Techdegree Student 11,145 Points

TypeError: Cannot read property 'map' of undefined

The following error is being displayed. Everything seems to be right. Even the new and updated Wikipedia issue, is updated.

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 getJSON(url) {
  return new Promise((resolve, reject ) => { //Creating a new Promise

  const xhr = new XMLHttpRequest(); //New http xml request
  xhr.open('GET', url); //gets url
  xhr.onload = () => { //when receiving file
    if(xhr.status === 200) {
      let data = JSON.parse(xhr.responseText);
      resolve(data);
    }

    else {
      reject( Error(xhr.statusText));

    }
  };

  xhr.onerror = () => reject( Error("Network error!")); //if there is an issue with http request due to network issue
  xhr.send();



  });

}



function getProfiles(json) {
  const profiles = json.people.map( person => { //The reason they are written this way is due to the name in wikipedia normally this is not needed the current astros.json takes the name written as 

    if ( person.name === "Andrew Morgan" ) { //here
        person.name = "Andrew_R._Morgan";
    }

    if ( person.name === "Anatoly Ivanishin" ){
      person.name = "Anatoli_Ivanishin"; //wiki as it as so
    }

    if ( person.name === "Chris Cassidy" ){
      person.name = "Christopher_Cassidy";
    }

    return getJSON( wikiUrl + person.name );



  });

  console.log(Promise.all(profiles));
}




function generateHTML(data) {
  data.map(astroguy => {
  const section = document.createElement('section');
  peopleList.appendChild(section);
  section.innerHTML = `
    <img src=${astroguy.thumbnail.source}>
    <h2>${astroguy.title}</h2>
    <p>${astroguy.description}</p>
    <p>${astroguy.extract}</p>
  `;
});
}




btn.addEventListener('click', (event) => {
  getJSON(astrosUrl)
  .then(getProfiles) //fetches the profiles
  .then(generateHTML) //print data to the console
  .catch( err => console.log(err)); //catches any error 
  event.target.remove();
});

2 Answers

Steven Parker
Steven Parker
231,271 Points

The "getProfiles" function is creating a new Promise and logging it to the console, but it's not returning it so it can be passed on to the next step.

Thanks Steven Parker. My getProfiles function is as follows:

function getProfiles(json) {
  const profiles = json.people.map( person => {
    return getJSON(wikiUrl + person.name);      
  }); 
  return Promise.all(profiles);
}

I think I am returning it, but I still have the error.

I'm getting this error...

TypeError: Cannot read property 'source' of undefined
    at promises.js:35
    at Array.map (<anonymous>)
    at generateHTML (promises.js:31)

and can't work out why because my code appears to be the same as what is shown/demonstrated in the video. Quite frustrating after all of that learning to get to that point...