How do I store the result of a JSON API call for later use?

Question

I have what is probably a pretty simple question about how to make use of a JSON object returned by an Ajax call for use later in my program. I am trying to do it by declaring my own local array of object and putting the values I want in it, but that is failing because it is apparently unable to find my array.

Here is the code:

function getUsers() {
    var users = [
        { name: "ESL_SC2", displayName:"", logo:"", url:"" }, 
        { name: "OgamingSC2", displayName: "", logo: "", url: "" }, 
        { name: "cretetion", displayName: "", logo: "", url: "" }, 
        { name: "freecodecamp", displayName: "", logo: "", url: "" }, 
        { name: "storbeck", displayName: "", logo: "", url: "" }, 
        { name: "habathcx", displayName: "", logo: "", url: "" }, 
        { name: "RobotCaleb", displayName: "", logo: "", url: "" }, 
        { name: "noobs2ninjas", displayName: "", logo: "", url: "" }, 
        { name: "MedryBW", displayName: "", logo: "", url: "" }
    ];

    for (var i = 0; i < users.length; i++) {
        var user = users[i].name;
        $.ajax({
            type: 'GET',
            url: 'https://api.twitch.tv/kraken/channels/' + user,
            headers: {
                'Client-ID': 'xxxxx'
            },
            success: function (data) {
                console.log(users[i].displayName + " is the display name");
                users[i].displayName = data.display_name;
                users[i].logo = data.logo;
                users[i].url = data.url;
            }
        });
    }
}

This immediately fails with this error:

getStreamData.js:22 Uncaught TypeError: Cannot read property 'displayName' of undefined(…)

Obviously, this is not the correct way to do this. So, my question is what is the correct way to store results from an Ajax call so I can use/manipulate them in my code later?

Thanks for the help!

The issue is because you need a closure to maintain the scope of your `i` variable within the AJAX callback in the `for` loop. See the duplicate question for an in-depth explanation. Here's a fixed version: https://jsfiddle.net/b7xra23x/ — Rory McCrossan, Nov 05 '16 at 14:21
You are getting the error because the array is zero-index based and .length is not.. Try length-1 and it will work. — VisualBean, Nov 05 '16 at 14:23
https://jsfiddle.net/alexintime/tqysufx5/ the problem is not the start.. the problem is the end. the last iteration will be i = 9 - but the array does not contain a 9th spot since it is zero-index based — VisualBean, Nov 05 '16 at 14:26
@VisualBean that does not fix the issue, it causes separate ones. The output is wrong based on the array of objects; it's missing the last two items and the first output shows a null displayName — Rory McCrossan, Nov 05 '16 at 14:28
My comment was regarding the property undefined error, - which is why i did not create it as an answer :) you are right though. — VisualBean, Nov 05 '16 at 14:30
On a different note, you should probably invalidate your client id and get a new one :) — VisualBean, Nov 05 '16 at 14:33

How do I store the result of a JSON API call for later use?

0 Answers0