How to print json array in jquery

Question

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.

Is your json data correct? You have in description a list of objects with city, address, etc; but you also have some of the same fields directly in the main object (and others are different). Which city data matters to you, the main one or the ones in the list? — mgibsonbr
– mgibsonbr, Commented Dec 22, 2012 at 5:24

closure · Accepted Answer · 2012-12-22 05:11:53Z

3

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.

edited Dec 22, 2012 at 5:11

answered Dec 22, 2012 at 5:02

closure

7,4521 gold badge25 silver badges23 bronze badges

Sign up to request clarification or add additional context in comments.

5 Comments

J.K.A. Over a year ago

alert in working but $("#city option[value="+this['city']+"]").attr("selected", "selected"); not working

closure Over a year ago

Above statement that is not working. I guess it is part of $.each function, right?

closure Over a year ago

A wild guess without knowing your html, try $("option[value='"+this['city']+"']", "#city").attr("selected", "selected");

mgibsonbr Over a year ago

@closure I think the OP was trying to reply to my answer. Anyway, I tested his code, and it works fine (assuming his HTML is like you and me are imagining). Your version works fine as well.

J.K.A. Over a year ago

@closure: Both (you and mgibsonbr) of your answers really helped me and I want to help from both of you.

mgibsonbr · Accepted Answer · 2012-12-22 05:09:35Z

1

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.

edited Dec 22, 2012 at 5:09

answered Dec 22, 2012 at 5:04

mgibsonbr

22.1k7 gold badges73 silver badges115 bronze badges

9 Comments

J.K.A. Over a year ago

alert is working but $("#city option[value="+this['city']+"]").attr("selected", "selected"); not working

mgibsonbr Over a year ago

@Ultimate Remember that you have many cities in the result. The $.each will iterate over them, selecting each one in succession (thus de-selecting the others). If this is not your problem, please post your HTML and maybe we can help more.

J.K.A. Over a year ago

For city its done and working. But now I want to generate combo-box in jquery and want to iterate countries over there. I am modifying my post with html.

J.K.A. Over a year ago

I modified the post plz check

J.K.A. Over a year ago

Finally I am done with this using : $('#country').append( new Option(this['country'],this['country']));

|

Vivek Goel · Accepted Answer · 2012-12-22 05:04:44Z

0

description in an array you need to access using array index:

userinfo["description"]["0"]["city"]

answered Dec 22, 2012 at 5:04

Vivek Goel

24.4k30 gold badges119 silver badges193 bronze badges

Comments

De Basis · Accepted Answer · 2012-12-22 05:07:13Z

0

see this : http://closure-library.googlecode.com/svn/docs/closure_goog_json_json.js.html

this sure wll be help full :)

answered Dec 22, 2012 at 5:07

De Basis

73 bronze badges

Collectives™ on Stack Overflow

How to print json array in jquery

4 Answers 4

5 Comments

9 Comments

Comments

Comments

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

5 Comments

9 Comments

Comments

Comments

Related