2

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

Java Script：当您单击列表中的某个项目时调用此函数。

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

当我尝试像在示例中那样在头像上进行控制台登录时，我只是未定义，但是如果我执行名称或状态的 console.log，则只会获得正确的值。

4

2 回答 2

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 的优秀答案，以更具战略性地看待如何最好地构建 JSON 数据的问题。

更多相关阅读：我今天早些时候针对这个问题发布的关于 JSON 重组的讨论。

于 2013-06-06T21:17:57.953 回答
2

考虑重构原始 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

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

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

并最终转向更正式的唯一 ID：

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

在json.com上有很多关于构建 JSON 的绝妙想法

于 2013-06-06T21:12:54.927 回答