Fetch JSON data from API Javascript

Question

So I have been working on a mini project however I can't seem to fetch data from the JSON file in JavaScript.

I have the data displayed in the console, however if I want to print out the first array I get the value 'undefined'

Here is my script.js file:

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

Are you *sure* that your image is from that code? I just did a `GET` on that endpoint and got the following object back: `{page: 1, total_results: 19821, total_pages: 992, results: Array(20)}`. Your image is identical to the value of the `results` property. Try `ourData.results[0]` instead. — Tyler Roper, Aug 15 '18 at 00:34

NotoriousPyro · Accepted Answer · 2018-09-03T21:38:32.323

You can use this function I wrote. It is in use for the graphs on my mining pool so you can see it in action at metaverse.farm. It will automatically retry every 10 seconds if it is unsuccesful.

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();
}

Just call it like so:

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;
});

And then all you need is:

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

Output:

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

You can even do:

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]);
});

Output:

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

If you combine it with a function like so, you have an asynchronous JSON loader which doesn't stop the browser doing other things:

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();
        });
    });
}

Fetch JSON data from API Javascript

1 Answers1