javascript - 使用 $.get AJAX 解析多维 JSON 数组

Question

我有一个用于查找数组并使用 AJAX 和 jQuery 返回结果的表单。我有一个功能在工作，但另一个功能不工作，而且我确信在这一点上我对过度分析和长时间的故障排除感到困惑。请让我知道我缺少什么。

基本表单元素:

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

基本数组:

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

工作的 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 {
    }
}

返回:
召唤师等级:26
召唤师ID:9999999

现在，当我尝试访问以下数组中此用户 ID 的“页面”中的“名称”属性时:

{"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
}}

使用以下内容，我没有得到我所期望的(即 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 {
    }
}

相反，它返回:

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

我确定有几个问题，但我特别怀疑以下行:

summonerMastery = json[userID].pages;

Answer 1

您可以通过以下方式获取页面名称

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

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

}

编辑:

要检查特定的词，你可以这样做

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

编辑 2:

在您的 HTML 中添加一个按钮(或在您的 AJAX 调用的 success 处理程序中动态创建一个按钮。)

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

在你的 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'); 
}