JavaScript always getting empty array after fetching json content from an array of urls [duplicate]

Maybe this is a dumb question, but I struggled for several hours, and I have to seek help from the community.

Basically, I want to fetch Url content (in JSON format) from an array of Urls, and put all the JSON objects in an array. imdbids is an array of movie ids. What I did is to loop through the ids, in each loop, get an url, and use fetch API to get movie information from omdb(a movie database). I am 100% sure that the fetch API works well and can get JSON object, but I always get an empty recommendations array when I run this function.

Hope someone can help me, I would appreciate that!

Here is my code:

    function getMovieInfo(imdbids) {
        var recommendations = [];

        for (var element of imdbids) {
            var url = "http://www.omdbapi.com/?i=" + element;
            fetch(url).then((response) => response.json()).then((data) => {recommendations.push(data)})
        }
        return recommendations;
    }