How do i pull the objects out of the promises?

Question

let fetchedData;
let dataToUse;
let moviesDivs;
const searchBtn = document.querySelector('.submitInput')
const movieName = document.querySelector('.searchInput')

searchBtn.addEventListener('click',(e)=>{
     e.preventDefault()
   fetch(`http://www.omdbapi.com/?apikey=1d0a39bf&s=${movieName.value}`)
   .then(res=>res.json())
   .then(data=>{
    
    fetchedData = data.Search
    dataToUse= fetchedData.map((item)=>{
        const response = getMovie(item.imdbID)
        return response
    })
     console.log(dataToUse)
   })})

      async function getMovie(imdbID){
        let data = await fetch(`http://www.omdbapi.com/?apikey=1d0a39bf&i=${imdbID}`)
        let response =data.json()
        return response
    }

    <div id='search-bar' class='centered'>
        <input class='searchInput' type="text" placeholder="Search for a movie">
        <input class='submitInput' type="submit" value="Search">
    </div>

Hello, can someone explain me what am I doing wrong here to fetch the data correctly? Right now after typing a movie name im supposed to get the movies and then retrieve their full information after mapping through fetchedData variable. But after I try map over the fetchedData variable, i get returned an array of fulfilled promises, which I see have the objects inside each of them that I needed to be returned. Did i misspelled something wrong in the getMovie() function? Ty

Exposing api key's is not really best practice as you expose it to whole world, consider resetting it — risky last, Jan 04 '23 at 16:14
"*i get returned an array of fulfilled promises*" - you'll need to use `Promise.all` — Bergi, Jan 04 '23 at 16:20

score -1 · Answer 1 · answered Jan 04 '23 at 16:06

let fetchedData;
let dataToUse;
let moviesDivs;
const searchBtn = document.querySelector('.submitInput')
const movieName = document.querySelector('.searchInput')

searchBtn.addEventListener('click', (e) => {
  e.preventDefault()
  fetch(`http://www.omdbapi.com/?apikey=1d0a39bf&s=${movieName.value}`)
    .then(res => res.json())
    .then(data => {
      return Promise.all(data.Search.map((item) => {
        return getMovie(item.imdbID)
      }))
    })
    .then(data => console.log(data))
})

async function getMovie(imdbID) {
  let data = await fetch(`http://www.omdbapi.com/?apikey=1d0a39bf&i=${imdbID}`)
  let response = data.json()
  return response
}

<div id='search-bar' class='centered'>
  <input class='searchInput' type="text" placeholder="Search for a movie">
  <input class='submitInput' type="submit" value="Search">
</div>

How do i pull the objects out of the promises?

1 Answers1