Getting undefined when trying to acces a JSON item

Question

i am trying to get a JSON and access its objects to retrieve data, all my paths seems to be working good but one specifically is not working. I just checked and the path is the same the other objects i am trying to access, in the console i keep getting undefined as a result. i will appreciate if you guys could tell me whats wrong with the code i will leave you the JSON structure and also the java Scripti hope you guys can help me figuring out, and also would be good if you could give me some tips on my coding because I am learning.

Java Script: This function is called when you click on some item in a list.

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"     
    });
}

And this is the 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"
        }
    ]
}
}

When I try to do the console log on avatar like is in the example I just get undefined, but if i do console.log of name or status y just get the correct values.

Answer 1

Consider restructuring the original JSON object so you can access users directly by their unique id - in this case it appears to be "name".

For example:

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

This could be accessed in the following ways without the expense of a loop:

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

There's an obvious cost-benefit here, but you may get the best of both by inlcuding the "name" attr as well:

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

And eventually moving to a more formal unique id:

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

There's lots of excellent ideas for structuring JSON at json.com

Answer 2

Jhonnatan, I'm glad you got your code working. So this isn't really an "answer" to your original question. But you also asked for tips on the coding and how to improve it. That's great that you're looking for ways to improve your code!

Here's one suggestion for you, a simpler way to write the checkUser() function. This is just a direct conversion of your function that should work with the same data format.

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 );
             }
         });
    });
}

Note how the use of the contact object makes it unnecessary to create all those jsonUserXxxx variables, because code like contact.avatar is just as simple and clear as jsonUserAvatar.

I also highly recommend @DaveRomero's excellent answer for a more strategic look at the question of how best to structure your JSON data.

More related reading: this discussion of JSON restructuring that I posted in response to this question earlier today.