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 Asynchronous Programming with JavaScript Understanding Promises Handle Multiple Promises with Promise.all

Armend Azemi
Armend Azemi
21,223 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