for 循环从 api 获取多个数组并且多次只显示一个数组

Question

我收到此错误：

从api获取电影的函数：

async function Movie(id){
    await fetch(`https://api.themoviedb.org/3/movie/${id}?api_key=84120436235fe71398e95a662f44db8b`)
        .then((res) => res.json())
        .then((json) => {
        name = json.original_title;
        img = json.poster_path;
        link = name.replace(/[^a-zA-Z\s/ ]/g, "");
        var MyArray = {'name':`${name}`, 'img':`${img}`, 'link':`/movies/${link}.html`}
        console.log(MyArray)
        })
        .catch(err => {
            console.error(err);
        });
}

电影数组：

const MyMovies = [
    Movie(238),
    Movie(899082),
    Movie(899),
]

加载电影的功能：

async function LoadMovies(){
    buildTable(MyMovies)
    function buildTable(data){
        var table = document.querySelector('#movies')
        for (var i = 0; i < data.length; i++){
            var row = `<img id="img" src="${'https://image.tmdb.org/t/p/w342/' + img}" alt="${name}" class="thumb" onclick="location.href='${link}'">`
            table.innerHTML += row
        }
    }
}

Answer 1

你不断地覆盖 ing，link，全局上下文中的名称...你必须隔离这些...我建议使用 class，这样每部电影都可以有它自己的一组独特的价值......你必须有点re-think你的方法： // 添加 json 以完成

class Movie {

    constructor(id) {
        this.id = id;
        this.load();
    }
    finalize(json) {
        this.name = json.original_title;
        this.img = json.poster_path;
        this.link = name.replace(/[^a-zA-Z\s/ ]/g, "");
        var MyArray = { 'name': `${this.name}`, 'img': `${this.img}`, 'link': `/movies/${this.link}.html` }
        console.log(MyArray)
    }

    async load() {
        await fetch(`https://api.themoviedb.org/3/movie/${this.id}?api_key=84120436235fe71398e95a662f44db8b`)
            .then((res) => res.json())
            .then((json) => {
                this.finalize(json)
            })
            .catch(err => {
                console.error(err);
            });
    }

}


const MyMovies = [
    new Movie(238),
    new Movie(899082),
    new Movie(899),
]

async function LoadMovies() {

    // var table = document.querySelector('#movies')
    for (var i = 0; i < MyMovies.length; i++) {
        var item = MyMovies[i];
        console.log("img", item.img);
        console.log("name", item.name);
        console.log("link", item.link);

        // var row = `<img id="img" src="${'https://image.tmdb.org/t/p/w342/' + item.img}" alt="${item.name}" class="thumb" onclick="location.href='${item.link}'">`
        // table.innerHTML += row
    }

}

for 循环从 api 获取多个数组并且多次只显示一个数组

for loop gets multiple array from api and shows only one array for so many times

html

javascript

api

loops

themoviedb-api