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

Armend Azemi
Armend Azemi
27,921 Points
Posted by Armend Azemi
Armend Azemi
27,921 Points

My solution for when the search results are ambiguous.

So, doing this video in 2022, some names of the astronauts currently in space, return more than one value from the Wikipedia page, thus leaving us with a default image and no real description.

Here is my solution to fixing that problem so that we can correctly display the information about the astronauts even when Wikipedia is returning several results.

function extractJSONDataFromAmbigiousResult(searchTerm){
  return new Promise((resolve, reject) => {
    let data = getJSON(wikiUrl+searchTerm)
    let specificSearchTerm = ''
    data.then(json => {
      if (json.extract.includes('naut')){
        // Regex for words ending with 'naut'
        let regex = new RegExp(/\w*naut\b/gm)
        // Getting 2 values per search, ['astronaut', 'astronaut']. We only want a single value.
        let occupation = json.extract.match(regex)[0] 
        specificSearchTerm = searchTerm + ' ' +'('+occupation+')'
        let specificSearchTermData = getJSON(wikiUrl+specificSearchTerm)
        resolve(specificSearchTermData)
      }
    }) 
  });
}

This is the helper function I used to 'extract' the astronaut data when we get a response with multiple options from Wikipedia.

// Generate the markup for each profile
function generateHTML(data) {
  data.map(personalData => {
    const section = document.createElement('section');
    peopleList.appendChild(section);
    // Check if request returns a 'standard' page from Wiki
    if (personalData.type === 'standard') {
      section.innerHTML = `
        <img src=${personalData.thumbnail.source}>
        <h2>${personalData.title}</h2>
        <p>${personalData.description}</p>
        <p>${personalData.extract}</p>
      `;
    } else {
      let data = extractJSONDataFromAmbigiousResult(personalData.title)
      data.then(json => {
        section.innerHTML = `
          <img src=${json.thumbnail.source}>
          <h2>${json.title}</h2>
          <p>Results unavailable for ${json.title}</p>
          ${json.extract_html}
        `;
      })

    }

  })
}

And this is the modification needed to the generateHTML() function, as can be seen in the else clause.

Hope this helps, and perhaps you guys can share your solutions or improvements/suggestions to my solution.

Cheers, and happy coding!

1 Answer