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
207,003 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.

Daniel Cranney
Daniel Cranney
10,394 Points

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.

Daniel Cranney
Daniel Cranney
10,394 Points

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