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 From Callbacks to Promises

Andrew Cauthorn
Andrew Cauthorn
6,967 Points
Posted by Andrew Cauthorn
Andrew Cauthorn
6,967 Points

Wikipedia Endpoint is no longer active

The Wikipedia endpoint used in the video is no longer active. A 404 is returned.

2 Answers

Steven Parker
Steven Parker
231,172 Points
Steven Parker
Steven Parker
231,172 Points

You did not give the specifics, but I'd guess you're experiencing a name mismatch. This exercise uses the results of one API to get information from another one, and sometimes the translated spelling of the non-English names isn't exactly the same. Or one may use a nickname and the other a full name.

Take a look at some of the other questions that have been asked on this same topic, many include proposed solutions in their answers.

Steven Parker
Steven Parker
231,172 Points
Steven Parker
Steven Parker
231,172 Points

This is not a Wikipedia issue, as the error occurs when accessing open-notify.org before any Wikipedia requests are generated.

Newer browsers, specifically those created after this course was released, generally don't allow mixed content (secured via https and insecure via http) by default. If you change your browser settings to allow insecure content (instead of blocking it), the requests will be accepted and processed.

Andrew Cauthorn
Andrew Cauthorn
6,967 Points
Andrew Cauthorn
Andrew Cauthorn
6,967 Points

Steven Parker I tried the solution posted in some of those other questions but it still doesn't want to work. Seems like the endpoint is no longer active. My code is posted below. Maybe I'm doing something wrong? 

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('A network error occurred') );
    xhr.send();
  });
}

function getProfiles(json) {
  const profiles = json.people.map( person =>
    getJSON(wikiUrl + person.name.replace("Anatoly", "Anatoli")
                                 .replace("Chris", "Christopher"))
  ); 
  return Promise.all(profiles);
}

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

btn.addEventListener('click', (event) => {
  event.target.textContent = "Loading...";
  getJSON(astrosUrl)
    .then(getProfiles)
    .then(generateHTML)
    .catch( err => {
      peopleList.innerHTML = '<h3>Something went wrong</h3>'
     console.log(err) })
    .finally( () => event.target.remove() )
});