Retrieving a variable from within a function

Question

I am attempting to pull information from the League of Legends API.

To simplify what I am doing, I am attempting to pull information about a user and their previous matches. The problem that I run into is that when I parse a JSON request, it returns a champion ID rather than their name (Ex: 412 rather than "Thresh").

The only solution I can see for this would be to make another JSON request and parse that data for the champion name. Currently what I have looks like this.

$.getJSON(championMasteryPHP, function (json) {
    for (var i = 0; i < 20; i++) {
        var champID = json[i].championId;
        var championInfo = "http://example.com/champInfo.php?summonerid=" + champID;

    $.getJSON(championInfo, function (json2) {
        var champName = json2.name;
    });

    $('#champ').append("<li>"+champID+" - "+champName+"</li>")
    }
});

I'm unable to access the champName variable due to it being nested within the second JSON function.

Is there a better way to do this?

just append the li inside your nested chanpionInfo call? Also, its json2.name and not json.name — juvian, Feb 26 '16 at 19:01

seahorsepip · Accepted Answer · 2016-02-26T19:47:38.113

$.getJSON(championMasteryPHP, function (json) {
    for (var i = 0; i < 20; i++) {
        var champID = json[i].championId;
        var championInfo = "http://example.com/champInfo.php?summonerid=" + champID;

    $.getJSON(championInfo, function (json2) {
        var champName = json2.name;
        $('#champ').append("<li>"+champID+" - "+champName+"</li>")
    });
    }
});

Just put it inside the second json request since you need to wait till that request is done anyway.

Zakaria Acharki · Answer 2 · 2016-02-26T19:09:01.173

4

You should put the append statement in the callback because getJSON is an asynchronous method (does mean the Request is running in the background, and calls your function back when it got a response), so you should wait for the response first then you can append it to #champ :

$.getJSON(championMasteryPHP, function (json) {
    for (var i = 0; i < 20; i++) {
        var champID = json[i].championId;
        var championInfo = "http://example.com/champInfo.php?summonerid=" + champID;

        $.getJSON(championInfo, function (json2) {
             var champName = json.name;

             $('#champ').append("<li>"+champID+" - "+champName+"</li>")
        });

    }
});

Hope this helps.

edited Feb 26 '16 at 19:09

answered Feb 26 '16 at 19:02

Zakaria Acharki

66,747
15
75
101

Small question, After moving the append statement, now my first call loops so my end result looks like this. http://i.imgur.com/Cp5SpX0.png It is looping the last item in the list (Id 58 for example). What did I do wrong? – Zlkva Feb 26 '16 at 21:44
I'm not sure what are you expecting as result, but that really depending to the Json response. (just small note : instead of `20` better if you use `json.length`). – Zakaria Acharki Feb 26 '16 at 23:11
What I'm attempting to do is get this data http://pastebin.com/H1hbCJXJ But it does not contain champion names, just their ID. Because of this I need to parse individual data for each champion ID to get their name. That looks like this. http://pastebin.com/CWZ1R0Pg The problem I'm running into now is that my first parse will freeze on my last result in the data set rather than looping in the for loop and pulling every result. It looks like this. http://i.imgur.com/Cp5SpX0.png rather than this http://i.imgur.com/y91HRJ3.png – Zlkva Feb 27 '16 at 00:59

Retrieving a variable from within a function

2 Answers2