Reputation: 7404

How to print json array in jquery

Following is my json response :

{"fname":"abc","lname":"xyz","email":"[email protected]","description":[{"city":"abcxyz","address":"AX","country":"US","date":"2020-02-01"},{"city":"abcxyz","address":"AX","country":"US","date":"2020-02 01"}], "city":"abcxyz","address":"DS","country":"US","Month":"12","Year":"2012"}

And following is my code :

success: function(data)
{                             
       var userinfo=eval(data);         
       alert(userinfo['fname1']; //display correct result
       alert(userinfo['description']['city']; //display undefined

       if(!$("#fname1").val())  $("#fname1").val(userinfo['fname']);
       if(!$("#lname1").val())  $("#lname1").val(userinfo['lname']);                                                     
}

In success function if I am trying to alert alert(userinfo['fname1'] then its showing me the correct result i.e. displaying name but if I am trying to alert alert(userinfo['description']['city'] then its showing me undefined in alert.

Then I tried using each loop but still its not working

$.each(userinfo['description'], function() {
alert(userinfo'description']['city']; //not working
$("#city option[value="+userinfo['description']['city']+"]").attr("selected", "selected");
});

Following is my html :

<select name="country" id="country">
        <?php
          foreach ($this->description as $country) {
        ?>
        <option value="<?php echo $country['country']; ?>" <?php echo ($this->params['country'] == $country['country']) ? "selected='selected'" : ""; ?>><?php echo $country['country']; ?></option>
         <?php }
         ?>
</select>

Can anyone telll me where I am going wrong. Thanks.

Upvotes: 0

Answers (4)

closure

Reputation: 7452

You need to do:

alert(userinfo['description'][0]['city'];

userinfo['description'] is an array. You need to refer to element by index first. Once you have reference to the object, refer the attribute

I din't see any need of eval. Eval is a bad practice. You can write this like:

var userinfo = data;

JQuery parses the response if right headers (application/json) are sent by the server or you have passed json for dataType parameter. Even default for dataType is intelligent guess.

Upvotes: 3

mgibsonbr

Reputation: 22007

Your second approach is the right one, you should iterate over userinfo['description'] because it's an array. However, you should access the current element of the iteration:

$.each(userinfo['description'], function() {
    alert(this['city'];
    $("#city option[value="+this['city']+"]").attr("selected", "selected");
});

You can use either this or an explicit second parameter to get the current element (the first parameter is the index in the array). Check the docs for jQuery.each for more info.

BTW I second @closure, using eval is security-unwise. Use $.parseJSON instead (or JSON.parse, if your environment supports it) when you need to parse json-formatted string. In this case it's unnecessary, since the success callback already does that to you.

Upvotes: 1