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

Victor Reynaga
Victor Reynaga
4,596 Points

I keep getting - Uncaught (in promise) Error at XMLHttpRequest.xhr.onload Im not able to move on due to errors

Heres my code

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) =>{ const xhr = new XMLHttpRequest(); xhr.open('GET', url); xhr.onload = () => { if(xhr.status === 200) {
let data = JSON.parse(xhr.responseText); resolve(data); } else { reject( Error(xhr.statusText) ); } }; xhr.onerror = () => reject( Error('Oops!') ); xhr.send(); }); }

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

// Generate the markup for each profile function generateHTML(data) { const section = document.createElement('section'); peopleList.appendChild(section); // Check if request returns a 'standard' page from Wiki if (data.type === 'standard') { section.innerHTML = <img src=${data.thumbnail.source}> <h2>${data.title}</h2> <p>${data.description}</p> <p>${data.extract}</p> ; } else { section.innerHTML = <img src="img/profile.jpg" alt="ocean clouds seen from space"> <h2>${data.title}</h2> <p>Results unavailable for ${data.title}</p> ${data.extract_html} ; } }

btn.addEventListener('click', (event) => { getJSON(astrosUrl) .then(getProfiles) .then( data => console.log(data) ) .catch( err => console.log(err) ) event.target.remove(); });

im also getting a - GET https://en.wikipedia.org/api/rest_v1/page/summary/Yulia%20Pereslid 404

Ive heard many complaints that the links are no longer up to date and cause problems aswell... i cant move on to the next video because these errors cause more errors after i add more code.

Im sure i copied the code exactly from the video... not sure what the problem is.

Shawn Kelley
seal-mask
.a{fill-rule:evenodd;}techdegree
Shawn Kelley
Full Stack JavaScript Techdegree Student 6,240 Points

Is xhr.onload the same as checking for xhr.readystate === 4? I'm asking as a non-expert, but wondering if there's a problem with things firing early (say on step 2 or 3). Hope you find a solution soon!

1 Answer

Victor Reynaga
Victor Reynaga
4,596 Points

It turns out one of the names of the astronauts in astrosUrl is spelt wrong... So when wiki tried to search for the name ...it gives an error as the name doesn't exist