从API Javascript获取JSON数据

Question

所以我一直在做一个小型项目，但是我似乎无法从JavaScript中的JSON文件中获取数据。

我在控制台中显示了数据，但是如果我要打印出第一个数组，则会得到值“ undefined”

这是我的script.js文件：

var URL = "https://api.themoviedb.org/3/movie/popular?api_key=f1d314280284e94ff7d1feeed7d44fdf&language=en-US&page=1";

var ourRequest = new XMLHttpRequest;

ourRequest.open('GET', URL);

ourRequest.onload = function (){

var data = ourRequest.responseText;

var ourData=JSON.parse(data);

console.log(ourData); // this line of code displays the full list of movies

console.log(ourData[0]); // this line displays undefined

Answer 1

您可以使用我编写的此功能。它已用于我的矿池中的图形，因此您可以在metaverse.farm上查看它的运行情况。如果操作失败，它将每10秒自动重试一次。

function getJsonData(url, callback) {
    let request = new XMLHttpRequest;
    let timer = setTimeout(function() {
        getJsonData(url, callback);
    }, 10000);
    request.onreadystatechange = function() {
        if (request.readyState === 4 && request.status === 200) {
            clearTimeout(timer);
            return callback(JSON.parse(request.responseText));
        }
    }
    request.open('GET', url);
    request.send();
}

就像这样称呼它：

var jsonUrl = "https://api.themoviedb.org/3/movie/popular?api_key=f1d314280284e94ff7d1feeed7d44fdf&language=en-US&page=1";
var myData;
getJsonData(jsonUrl, function(data) {
    myData = data;
});

然后您需要做的就是

console.log(myData.results[0]);

输出：

{vote_count: 7552, id: 299536, video: false, vote_average: 8.3, title: "Avengers: Infinity War", …}

您甚至可以：

var jsonUrl = "https://api.themoviedb.org/3/movie/popular?api_key=f1d314280284e94ff7d1feeed7d44fdf&language=en-US&page=1";
getJsonData(jsonUrl, function(data) {
    data.results[0].title = "WOOOOOOOOHOOOOOOOO!";
    console.log(data.results[0]);
});

输出：

{vote_count: 7552, id: 299536, video: false, vote_average: 8.3, title: "WOOOOOOOOHOOOOOOOO!", …}

如果将其与类似功能结合使用，您将拥有一个异步JSON加载程序，该加载程序不会阻止浏览器执行其他操作：

var myData;
loader = $('.loader');

async function refreshData() {
    loader.show();
    return new Promise(function(resolve, reject) {
        getJsonData(jsonUrl, function(data) {
            // Once the data is loaded...
            myData = data;
            insertData();
            loader.hide();
        });
    });
}