0

I'm currently working on a little imdb-like project in React.js using data from the OMDB API. In order to extract data, I'm first compiling a list of imdbIDs, and then calling those endpoints from the API to get more detailed data.

However, when I add the data to an array, the objects appear correctly in console.logs, but the length of the array is still zero. This makes it impossible for me to display that data in React.

For example:

enter image description here

As you can see, the movie details array here is full of objects but has a length of zero.

I'd appreciate any insight on whether I'm actually properly pushing data to the arrays or not, since I don't seem to be able to access the data from the movie detail array in other react components.

Here's the code I'm working with:


const App = () => {
    const [movies, setMovies] = useState([])
    const [movieData, setMovieData] = useState([])
    const [searchValue, setSearchValue] = useState('')
    const movieids = []
    const moviedetails = []
    

    const getMovieRequest = async (searchValue) => {
        const url = `http://www.omdbapi.com/?s=${searchValue}&apikey=263d22d8`
        const response = await fetch(url)
        const responseJson = await response.json()

        if (responseJson.Search) {
            setMovies(responseJson.Search)
        }

    };

    const generateMovieIds = ()=>{
        movies.forEach(element => {
            const currentid = element.imdbID
            movieids.push(currentid)
        });

    }

    const getMovieDetails = async (idValue) => {
        const url = `http://www.omdbapi.com/?i=${idValue}&apikey=263d22d8`
        const response = await fetch(url)
        const responseJson = await response.json()
        moviedetails.push(responseJson)     
        
    };

    const generateMovieDetails = async()=>{
        for(const element of movieids){
            await getMovieDetails(element)
            
        }

    }

    useEffect(() => {
        getMovieRequest(searchValue)
        generateMovieIds()
        generateMovieDetails()
    
        console.log(movies.length + ' LENGTH OF MOVIES')
        console.log(movies)
        console.log(moviedetails.length + ' LENGTH OF MOVIEDETAILS')
        console.log(moviedetails)       
        console.log(movieids.length + ' LENGTH OF MOVIEIDS')
        console.log(movieids)       
            
            
        
        
    }, [searchValue])

    return (
        <div className='container-fluid movie-app'>
            <div className='row d-flex align-items-center mt-4 mb-4'>
                <Heading heading='Movies' />
                {movies.length}
                vs
                {moviedetails.length}
                
                <Searchbar searchValue={searchValue} setSearchValue={setSearchValue} />
            </div>
            <div className='row'>
                <Movies moviedetails={moviedetails} />
            </div>
        </div>
    );
};

export default App;
Eric Wang
  • 13
  • 4
  • you forgot to `await getMovieDetails(element)` (add await) – Jeremy Thille Jan 14 '22 at 08:11
  • this seems to solve the problem when I place the console.log inside the generatemovie details function, but when I place the console.log inside the useEffect statement, the problem persists. Do you know why that might be happening ? I've updated my code to reflect the fix you provided. Thanks for all the help – Eric Wang Jan 14 '22 at 08:23

2 Answers2

0

have you checked the data you are getting in the function below, I think you should console.log the responseJson and then push which data you want to the specific array.

const getMovieDetails = async (idValue) => {
        const url = `http://www.omdbapi.com/?i=${idValue}&apikey=263d22d8`
        const response = await fetch(url)
        const responseJson = await response.json()
        moviedetails.push(responseJson);
Elikill58
  • 4,050
  • 24
  • 23
  • 45
nazli
  • 61
  • 1
  • 5
  • I checked the data that I'm getting in the form of responseJson and it is indeed correct. Do you think I should push specific pieces of data from the json rather than pushing the whole thing? I'm not sure if that's where the issue lies – Eric Wang Jan 14 '22 at 08:33
  • Yes I think pushing the whole thing is the issue, I never see that kind of usage of an API, it is always the specific part you push to an array. – nazli Jan 14 '22 at 11:07
0

You shouldn’t hold your movieDetails as a static array that you push onto. Change it to a useState([]) initially and then setState inside of the movieDetails component (currently you say movieDetails.push(response).

Your problem is is that react won’t trigger a re-render when you manually push data to an array, but it will when you setState using useState

DOZBORNE
  • 560
  • 3
  • 13