Parse multidimensional JSON array using $.get AJAX

Question

I have a form that is used to lookup an array and return results with AJAX and jQuery. I have one function working, but another isn't, and I'm sure at this point I'm confusing myself with over analysis and long hours of troubleshooting. Please let me know what I'm missing.

the basic form elements:

<form name="theForm">
<input id="userName" value="myName" />
<input id="sumID" value="9999999" />
<input type="submit" onClick="summonerLookUp();" />
</form>

The basic array:

{"myName": {
   "id": 9999999,
   "name": "myName",
   "profileIconId": 673,
   "revisionDate": 1406601264000,
   "summonerLevel": 26
}}

The working Javascript:

function summonerLookUp() {
    var ID = "";
    ID = $("#userName").val();
    setKey();
    if (ID !== "") {

        $.ajax({
            url: 'http://url-to-api',
            type: 'GET',
            dataType: 'json',
            data: {

            },
            success: function (json) {
                var userID = ID.replace(" ", "");

                userID = userID.toLowerCase().trim();

                summonerLevel = json[userID].summonerLevel;
                summonerID = json[userID].id;

                document.getElementById("sLevel").innerHTML            
                = summonerLevel;
                document.getElementById("sID").innerHTML 
                = summonerID;

            },
            error: function (XMLHttpRequest, textStatus, errorThrown) {
                alert("error getting Summoner data!");
            }
        });
    } else {
    }
}

Returns:
Summoner Level: 26
Summoner ID: 9999999

Now when I try to access the "Name" property within "pages" for this user ID in the following array:

{"9999999": {
   "pages": [
      {
         "masteries": [
            {
               "id": 4313,
               "rank": 2
            },
            {
               "id": 4121,
               "rank": 1
            },
            {
               "id": 4134,
               "rank": 3
            }
         ],
         "id": 41932694,
         "name": "Offense Main",
         "current": true
      },
      {
         "masteries": [
            {
               "id": 4123,
               "rank": 3
            },
            {
               "id": 4311,
               "rank": 1
            },
         ],
         "id": 41932698,
         "name": "Utility",
         "current": false
      },
      {
         "masteries": [
            {
               "id": 4143,
               "rank": 3
            },
            {
               "id": 4162,
               "rank": 1
            },
            {
               "id": 4131,
               "rank": 1
            }
         ],
         "id": 41932702,
         "name": "Offense",
         "current": false
      },
   ],
   "summonerId": 9999999
}}

using the following, I don't get what I'd expect (i.e.,Offense Main):

function masteriesLookUp() {
    var ID = "";
    ID = $("#sumID").val();
    setKey();
    if (ID !== "") {

        $.ajax({
            url: 'http://url-to-api',
            type: 'GET',
            dataType: 'json',
            data: {

            },
            success: function (json) {
                var userID = ID;

                summonerMastery = json[userID].pages;

                document.getElementById("sMastery").innerHTML 
                = summonerMastery;

            },
            error: function (XMLHttpRequest, textStatus, errorThrown) {
                alert("error getting Summoner data!");
            }
        });
    } else {
    }
}

Instead this returns:

[object Object],[object Object],[object Object],[object Object]

I'm sure there are several issue, but I suspect the following line specifically:

summonerMastery = json[userID].pages;

First off, that is not valid JSON (extra comma at end of second "masteries" object for example). To get the name it looks like pages is an array of JSON objects? So to get the first name "Offense Main" it would be json[userID].pages[0].name to get "Utility" it would be json[userID].pages[1].name, and so on. — berrberr
– berrberr, Commented Jul 30, 2014 at 3:05
sorry about the comma, its a long array and i trimmed it a bit for size, i forgot the comma. I think i see what you mean on how to access these items. I'll give it a try and let you know how it goes. I suppose i would need some sort of foreach loop to return all page names since i wont always know how many or which "Pages" name i am looking to access, correct? — fbords
– fbords, Commented Jul 30, 2014 at 3:12
Yes thats right. Pages is simply an array of JSON objects, so you can iterate over it and get the name (or any other) property from each page object. — berrberr
– berrberr, Commented Jul 30, 2014 at 3:19

AdityaParab · Accepted Answer · 2014-08-01 04:20:29Z

1

You can get page names in a following way

success: function (json) {
    var userID = ID;
    summonerMastery = json[userID].pages;

    for(var page in summonerMastery){
        document.getElementById("sMastery").innerHTML += summonerMastery[page].name+" ";
    }

}

EDIT:

To check for specific word, you can do it this way

for(var page in summonerMastery){
    if(summonerMastery[page].name.toLowerCase().indexOf("offense") !== -1){
        // do your stuff here.
    }
}

EDIT 2:

Add a button in your HTML (or create a button dynamically in your success handler of AJAX call.)

<input type="button" id="check" data-info="" style="display:none;" value="Check" />

In your javascript

success: function (json) {
    var userID = ID;
    summonerMastery = json[userID].pages;
    var b = $("#check");
    b.data("info",summonerMastery);

    b.off('click').on('click',function(){
        var summonerMastery = $(this).data('info');
        for(var page in summonerMastery){
            if(summonerMastery[page].name.toLowerCase().indexOf("offense") !== -1){
                alert("Success");
            } else {
                alert("Failure");
            }
        }
    });
    b.css('display','block'); 
}

edited Aug 1, 2014 at 4:20

answered Jul 30, 2014 at 3:24

AdityaParab

7,1003 gold badges30 silver badges40 bronze badges

Sign up to request clarification or add additional context in comments.

5 Comments

fbords Over a year ago

Thanks, would you happen to know how i can check the results of document.getElementById("sMastery").innerHTML += summonerMastery[page].name+", "; for a specific word or string? For example, if i wanted to check the returned results for the word "Offense"?

fbords Over a year ago

I'm a little confused. Would it be:

for(var page in summonerMastery){     if(summonerMastery[page].name.toLowerCase().indexOf("offense") !== -1){         // do your stuff here.     } }

---- or ----

for(var page in summonerMastery){     				if(summonerMastery[page].name.toLowerCase().indexOf("offense") !== -1){ 					document.getElementById("sMastery").innerHTML += summonerMastery[page].name+", "; 					} 				}

? Ideally I would like to click a button to check if the word exists in the string. If it exists, write success on the screen, if not, write failed.

fbords Over a year ago

tried a few things, still isn't coming out right. Any help would be appreciated.

AdityaParab Over a year ago

This is a bit confusing. Can you explain how exactly you want things to workout? Like, can you provide some scenario?

fbords Over a year ago

Sure, in the second function that pulls all of the mastery names, I would like to have a button that will search the returned results for a string. For example, "123". If "123" is found in the returned results, then print a success message on the screen, otherwise print a failed message. Sort of a basic verification.

Collectives™ on Stack Overflow

Parse multidimensional JSON array using $.get AJAX

1 Answer 1

5 Comments

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

5 Comments

Related