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 trialHamzah Iqbal
Full Stack JavaScript Techdegree Student 11,145 PointsTypeError: 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
231,271 PointsThe "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
11,609 PointsI'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...
Daniel Cranney
11,609 PointsDaniel Cranney
11,609 PointsThanks Steven Parker. My getProfiles function is as follows:
I think I am returning it, but I still have the error.