Javascript TypeError: JSON array object is undefined

Question

I am getting a perfectly created JSON object from server response.

For example:

{
    "users": [
        {
            "userId": 20410,
            "firstName": "Viral",
            "lastName": "Shah",
            "loginId": "[email protected]",
            "userRole": 3
        },
        {
            "userId": 400881,
            "firstName": "Viral",
            "lastName": "Shah",
            "loginId": "[email protected]",
            "userRole": 0
        },
        {
            "userId": 425622,
            "firstName": "Viral",
            "lastName": "Shah",
            "loginId": "[email protected]",
            "userRole": 0
        }
    ]
}

I am using this in JavaScript using AJAX like below:

var jsonobj2 = null;
var respObj = getSearchedWPUsers(firstname, lastname, loginid); //return json response
var len = respObj.length;
jsonobj2 = eval('(' + respObj + ')');


var tablehtml = "<table><tr><td><b>First Name</td><td><b>Last Name</td><td><b>Login Id</td><td><b>Editing Rights</td></tr><tr></tr>";

for (i = 0; i < len; i++) {
  tablehtml = tablehtml + "<tr>";
  //--------------
  tablehtml = tablehtml + "<td>";
  tablehtml = tablehtml + jsonobj2.users[i].firstName;
  tablehtml = tablehtml + "</td>";
  //--------------
  tablehtml = tablehtml + "<td>";
  tablehtml = tablehtml + jsonobj2.users[i].lastName;
  tablehtml = tablehtml + "</td>";
  //--------------
  tablehtml = tablehtml + "<td>";
  tablehtml = tablehtml + jsonobj2.users[i].loginId;
  tablehtml = tablehtml + "</td>";
  //--------------
  tablehtml = tablehtml + "<td><b>";
  var role = jsonobj2.users[i].userRole;
  if (role == 1 || role == 2 || role == 3) tablehtml = tablehtml + "<a href ='javascript:removeXML(" + jsonobj2.users[i].userId + ")'><u><font color='red'>Revoke access</font></a> ";
  else tablehtml = tablehtml + "<a href ='javascript:generateXML(" + jsonobj2.users[i].userId + ")'><u><font color='blue'>Assign access</font></a> ";

  tablehtml = tablehtml + "</td>";
  tablehtml = tablehtml + "</tr>";

}
tablehtml = tablehtml + "</table>";


document.getElementById("TableHolder").innerHTML = tablehtml;

//--------------------------

It throws errors like below

TypeError: jsonobj2.users[i] is undefined
[Break On This Error]
tablehtml = tablehtml + jsonobj2.users[i].firstName;

tried with JSON.parse(serverresponse); -- nothing happened

Please help

Are you sure respObj is what you think it is? It seems strange to return a value from a function making an Ajax call. Please show us what it contains. — Felix Kling
– Felix Kling, Commented Jan 11, 2013 at 14:38
Are you sure that respObj contains something? You might need to do async: false ajax in order to return something from ajax call. Because ajax is asynchronous. — Aamir Rind
– Aamir Rind, Commented Jan 11, 2013 at 14:38
Did you check what's in respObj in the firebug? Check firebug response. — Learner
– Learner, Commented Jan 11, 2013 at 14:40
getSearchedWPUsers(firstname, lastname, loginid); method is AJAX call method and it returns the json object fine I have pasted a sample response at the above of the post respObj does return a value — Sam
– Sam, Commented Jan 11, 2013 at 14:45

Danilo Valente · Accepted Answer · 2013-01-11 14:57:52Z

Try this instead:

jsonobj2 = eval('(' + respObj + ')');
var len = jsonobj2.users.length;

As I understand, respObj is a string that contains the JSON response, but it still needs to be parsed. So, if you do respObj.length, you're getting the length of the string, but not of the users array, properly. Also, I recommend you to parse this response using JSON.parse (whenever available by the browser) instead of using eval:

var respObj = getSearchedWPUsers(firstname, lastname, loginid);
var jsonobj2 = JSON.parse ? JSON.parse(respObj) : eval('(' + respObj + ')');
var len = respObj && respObj.users ? respObj.users.length : 0;

However, as Felix Kling and Aamir Adnan said, ajax calls are mostly asynchronous, so you might pass a callback function as argument, which will process the response as your will:

getSearchedWPUsers(firstname, lastname, loginid, function(respObj){
    var jsonobj2 = JSON.parse ? JSON.parse(respObj) : eval('(' + respObj + ')');
    var len = respObj && respObj.users ? respObj.users.length : 0;
    var tablehtml = "<table><tr><td><b>First Name</td><td><b>Last Name</td><td><b>Login Id</td><td><b>Editing Rights</td></tr><tr></tr>";

    for (i = 0; i < len; i++) {
        tablehtml = tablehtml + "<tr>";
        //--------------
        tablehtml = tablehtml + "<td>";
        tablehtml = tablehtml + jsonobj2.users[i].firstName;
        tablehtml = tablehtml + "</td>";
        //--------------
        tablehtml = tablehtml + "<td>";
        tablehtml = tablehtml + jsonobj2.users[i].lastName;
        tablehtml = tablehtml + "</td>";
        //--------------
        tablehtml = tablehtml + "<td>";
        tablehtml = tablehtml + jsonobj2.users[i].loginId;
        tablehtml = tablehtml + "</td>";
        //--------------
        tablehtml = tablehtml + "<td><b>";
        var role = jsonobj2.users[i].userRole;
        if (role == 1 || role == 2 || role == 3)
            tablehtml = tablehtml + "<a href ='javascript:removeXML(" + jsonobj2.users[i].userId + ")'><u><font color='red'>Revoke access</font></a> ";

        else tablehtml = tablehtml + "<a href ='javascript:generateXML(" + jsonobj2.users[i].userId + ")'><u><font color='blue'>Assign access</font></a> ";

        tablehtml = tablehtml + "</td>";
        tablehtml = tablehtml + "</tr>";

    }
    tablehtml = tablehtml + "</table>";

    document.getElementById("TableHolder").innerHTML = tablehtml;
});

It worked. Understood the mistake with length. Thanks a lot Mark

Collectives™ on Stack Overflow

Javascript TypeError: JSON array object is undefined

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related