Question

我正在尝试获取JSON并访问其对象以检索数据，我的所有路径似乎都运行良好，但其中一个具体无效。我刚刚检查过，路径与我试图访问的其他对象相同，在控制台中我一直得到未定义的结果。我将不胜感激，如果你们能告诉我代码有什么问题，我会给你留下JSON结构，还有java Scripti希望你们能帮助我搞清楚，如果你能给我一些关于我编码的提示，也会很好因为我在学习。

Java脚本：单击列表中的某个项目时会调用此函数。

function checkUser(){
    console.log("clicked");
    var user = $(this).html();
    $.getJSON("js/options.json", function(json){
        var itemsLength = json.chat.OnlineContacts.length;
        for ( var i = 0; i < itemsLength; i++) {
            var jsonUserName = json.chat.OnlineContacts[i].name;
            var jsonUserStatus = json.chat.OnlineContacts[i].status;
            var jsonUserAvatar = json.chat.OnlineContacts[i].avatar;
            if(user == jsonUserName){
                /*displayChatWindow(jsonUserName, jsonUserStatus, jsonUserAvatar);*/
                console.log(jsonUserAvatar);
             }
         };
    });
}

function displayChatWindow(user, status, avatar){
    /*var template = _.template($("#windowTemplate").html(), {userName: user, userStatus: status, userAvatar: avatar});
    $("body").prepend(template);*/
    $(".messages-container").slimScroll({
        height: '200',
        size: '10px',
        position: 'right',
        color: '#535a61',
        alwaysVisible: false,
        distance: '0',
        railVisible: true,
            railColor: '#222',
        railOpacity: 0.3,
        wheelStep: 10,
        disableFadeOut: false,
        start: "bottom"     
    });
}

这是JSON：

{
"chat": {
    "NumberOfOnlineContacts": "7",
    "NumberOfOfflineContacts": "800",
    "OnlineContacts": [
        {
            "name": "Nandy Torres",
            "status": "online",
            "avatar": "img/profile-picture2.jpg"
        },
        {
            "name": "Catherine Varela",
            "status": "Busy",
            "avatar": "img/profile-picture3.jpg"
        },
        {
            "name": "Jhonnatan Gonzalez",
            "status": "online",
            "avatar": "img/profile-picture4.jpg"
        },
        {
            "name": "Juan Prieto",
            "status": "away",
            "avatar": "img/profile-picture5.jpg"
        },
        {
            "name": "Alexander Barranco",
            "status": "Busy",
            "avatar": "img/profile-picture6.jpg"
        }
    ],
    "OfflineContacts": [
        {
            "name": "Nandy Torres"
        },
        {
            "name": "Catherine Varela"
        },
        {
            "name": "Jhonnatan Gonzalez"
        },
        {
            "name": "Juan Prieto"
        },
        {
            "name": "Jhonathan Sanchez"
        }
    ]
}
}

当我尝试按照示例中的控制台登录avatar时，我只是得到了未定义，但如果我执行console.log的名称或状态，则只需获取正确的值。

Answer 1

考虑重构原始JSON对象，以便您可以通过其唯一ID直接访问用户 - 在这种情况下，它似乎是“名称”。

例如：

{
    "chat": {
        "NumberOfOnlineContacts": "7",
        "NumberOfOfflineContacts": "800",
        "OnlineContacts": [
            {
                "Nandy Torres" : {
                    "status": "online",
                    "avatar": "img/profile-picture2.jpg"
                }
            },
            {
                "Catherine Varela" : {
                    "status": "Busy",
                    "avatar": "img/profile-picture3.jpg"
                }
            },
            {...}
        ]
    }
}

可以通过以下方式访问它，而无需花费循环：

json.chat.OnlineContacts[0].avatar
json.chat.OnlineContacts["Nandy Torres"].avatar
json.chat.OnlineContacts[user].avatar

这里有一个明显的成本效益，但你也可以通过包含“名称”attr来获得最佳效果：

"Nandy Torres" : {
    "name": "Nandy Torres",
    "status": "online",
    "avatar": "img/profile-picture2.jpg"
}

最终转向更正式的唯一身份：

"123abc" : {
    "name": "Nandy Torres",
    "status": "online",
    "avatar": "img/profile-picture2.jpg"
}

在json.com

构建JSON有很多很棒的想法

Answer 2

Jhonnatan，我很高兴您的代码正常运行。所以这不是你原来问题的“答案”。但是您还要求提供有关编码的提示以及如何改进它。您正在寻找改进代码的方法，这太棒了！

这是给你的一个建议，一种编写checkUser()函数的简单方法。这只是您的函数的直接转换，应该使用相同的数据格式。

function checkUser() {
    console.log( "clicked" );
    var user = $(this).html();
    $.getJSON( "js/options.json", function( json ) {
        $.each( json.chat.OnlineContacts, function( i, contact ) {
            if( user == contact.name ) {
                displayChatWindow( contact.name, contact.status, contact.avatar );
                console.log( contact.avatar );
             }
         });
    });
}

请注意contact对象的使用如何不必创建所有jsonUserXxxx个变量，因为contact.avatar之类的代码与jsonUserAvatar一样简单明了。

我还强烈建议@DaveRomero's excellent answer更具战略性地研究如何最好地构建JSON数据的问题。

更多相关阅读：this discussion of JSON restructuring是我今天早些时候回复this question时发布的。

尝试访问JSON项时获取未定义

2 个答案: