從 API Javascript 獲取 JSON 數據

Question

所以我一直在做一個小項目，但是我似乎無法從 JavaScript 的 JSON 文件中獲取數據。

我在控制台中顯示了數據，但是如果我想打印出第一個數組，我會得到值“未定義”

這是我的 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();
        });
    });
}