分配索引值的Javascript数组不起作用

Question

我正面临这个问题， 控制台输出包含 3 个数组，第一个在顶部（包含 id），第二个包含基于该 id 的电影名称，第三个包含电影海报，所以主要是标签 [11] 在第一个字符串之前其他两个数组没有 [11]，尽管其中有 11 11 个项目。 因此，我无法获取第一个索引，即标题[0] 给出错误，而第一个数组 ids[0] 给出第一个元素。 我该如何克服这个问题

我也标记了输出谢谢不知道如何处理。

<!DOCTYPE html>
    <html>
    <body>
    
        <div id="pred">
    
    
        </div>
    
    
        <script>
            let ids = "[19995, 440, 679, 17663, 602, 7450, 44943, 34851, 11551, 76757, 11260]"
            
            let data = JSON.parse(ids.replaceAll("\""))
            console.log(data)
            let titles = []
            let posters = []
            
            my_api_key = '34b55fa7f2d2346aa1045ed4cc22bd12'
            url1 = 'https://api.themoviedb.org/3/movie/'
            url2 = "https://image.tmdb.org/t/p/w500/" 
            for(i = 0 ; i < data.length ; i++){
             url = url1 + data[i] + '?api_key=' + my_api_key;
            
            fetch(url).then((data)=>{
                return data.json();
            
            }).then((completedata)=>{
                titles.push(completedata.title);
                posters.push(url2 + (completedata.poster_path));
            
            }).catch((err)=>{
                console.log(err)
            })
            
            }
            let my_M = "";
            my_M = `
            <h1 style="color:blue ;">
                    <span>${titles[0]}</span>
            </h1>
            `;
            document.getElementById("pred").innerHTML = my_M;
            
            console.log(titles)
            console.log(posters)
            </script>
    
    
    
    </body>
    
    </html>

Answer 1

您之所以将{}作为最后两个console.log()的返回值，是因为当您的代码最终到达console.log(titles)和console.log(posters)时，您的 API 获取尚未完成。 因此，在 fetch 之后（在 then 内部）到来的数据尚不可用。 这称为同步运行代码。

为了确保后一段代码会“等待”前一段，我们需要使代码异步，您可以在本文中阅读更多相关信息。

我不确定你想要实现什么，但如果你会得到类似下面的 javascript 代码。

编辑：我添加了 .then(()=>{}) 以确保在创建元素后呈现列表。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">

</head>
<body>
<div id="pred">


</div>
</body>
</html>
<script>
    const ids = [19995, 440, 679, 17663, 602, 7450, 44943, 34851, 11551, 76757, 11260]
    console.log(ids)
    let titles = []
    let posters = []
    my_api_key = '34b55fa7f2d2346aa1045ed4cc22bd12'
    url1 = 'https://api.themoviedb.org/3/movie/'
    url2 = "https://image.tmdb.org/t/p/w500/"
    const fetchData = url =>
        new Promise(resolve => {
                fetch(url).then((data) => {
                    return data.json();
                }).then((completedata) => {
                    titles.push(completedata.title);
                    posters.push(url2 + (completedata.poster_path));
                    resolve(url)
                }).catch((err) => {
                    console.log(err)
                })
            }
        );

    const fetchAllData = async () => {
        for (let i = 0; i < ids.length; i++) {
            let url = url1 + ids[i] + '?api_key=' + my_api_key;
            await fetchData(url);
        }
        console.log('All data is fetched');
    };
    fetchAllData().then(() => {
        let my_M = "";
        my_M = `
            <h1 style="color:blue ;">
                    <span>${titles[0]}</span>
            </h1>
            `;
        document.getElementById("pred").innerHTML = my_M;
        console.log(titles[0], posters)
    });


</script>

Answer 2

问题是您在收到 API 的响应之前尝试访问标题。 在 javascript 中，我们称之为异步代码。 您可以通过等待其执行完成来使您的代码同步。 您可以使用 async/await 语法来处理这个问题。

您可以尝试运行以下代码片段。 您将在控制台日志中看到一些延迟。

使用await您的获取请求 API 调用。 为了让您在函数中使用 await，您需要async keyword on the function 。

 <!DOCTYPE html> <html> <body> <div id="pred"> </div> <script> async function fetchMoviesJSON(url) { const response = await fetch(url); const movies = await response.json(); return movies; } async function fetchTitles() { let ids = "[19995, 440, 679, 17663, 602, 7450, 44943, 34851, 11551, 76757, 11260]"; let data = JSON.parse(ids.replaceAll("\"")); let titles = []; let posters = []; const my_api_key = '34b55fa7f2d2346aa1045ed4cc22bd12'; const url1 = 'https://api.themoviedb.org/3/movie/'; const url2 = "https://image.tmdb.org/t/p/w500/" ; for (i = 0 ; i < data.length ; i++) { url = url1 + data[i] + '?api_key=' + my_api_key; try { const movieResponse = await fetchMoviesJSON(url); titles.push(movieResponse.title); posters.push(url2 + (movieResponse.poster_path)); } catch (err) { console.log(err); } const my_M = ` <h1 style="color:blue ;"> <span>${titles[0]}</span> </h1> `; document.getElementById("pred").innerHTML = my_M; } console.log(titles); console.log(posters) } fetchTitles() </script> </body> </html>

分配索引值的Javascript数组不起作用

问题描述

2 个解决方案

解决方案1
0 2022-06-30 09:57:17

解决方案2
0 2022-06-30 11:34:51

分配索引值的Javascript数组不起作用

问题描述

2 个解决方案

解决方案1 0 2022-06-30 09:57:17

解决方案2 0 2022-06-30 11:34:51

解决方案1
0 2022-06-30 09:57:17

解决方案2
0 2022-06-30 11:34:51