Accessing data in a multidimensional JSON array with jQuery

Question

I am trying to work out how to access data in an essentially multidimensional JSON array.

My jQuery AJAX request looks like this:

 $("#login-form").submit(function(e) {
 e.preventDefault();
 $.ajax({
   type: 'POST',
   url: '/ajax/login',
   data: 'email='+$("#email").val()+'&password='+$("#password").val(),
   success: function(data){

     // FIRE ALERT HERE        
     alert(data.firstname);

     },
     dataType: 'json'
  });
});

This is what i am getting back. User account details, plus a list of products they have against their account.

{
    "logged_in":true,
    "firstname":"Joe",
    "surname":"Bloggs",
    "Full_name":"Joe Bloggs",
    "email":"[email protected]",
    "phone":"+123456789",
    "website":"",
    "age":"26-35",
    "street":"1 Street Ave",
    "city":"Townland",
    "state":"NA",
    "postcode":"1234",
    "country":"Australia",
    "products":2,
    "0":{
        "product_no":"1087",
        "customer":"2",
        "bought_from":"1",
        "date_of_purchase":"2011-04-08",
        "method":"instore",
        "invoice":"0",
        "current":"1"
    },
    "1":{
        "product_no":"24",
        "customer":"2",
        "bought_from":"1",
        "date_of_purchase":"2011-04-08",
        "method":"instore",
        "invoice":"0",
        "current":"1"
    }
}

As you can see, i am alerting the first name, which is fine. I can access everything in the first dimension by using data.key but i'm not sure how then i need to index the next dimension. Obviously I would like to display each of the products somehow.

Suggestions would be most welcome.

if u r using php then json_encode is best solution for your data — xkeshav
– xkeshav, Commented Apr 11, 2011 at 7:01

Salman Arshad · Accepted Answer · 2018-08-04 11:09:14Z

3

Inside your success function you can treat the JSON data as a JavaScript object. You can access the product array and objects inside it like this:

console.log(data.products + " product(s) in data"); // data.products is 2 (integer)
for(var i = 0; i < data.products; i++) {            // 
    var product = data[i.toString()];               // 0.toString() is "0"
                                                    // data["0"] is what you want
                                                    // now product points to the property "0"
    console.log(product.product_no);                // so you can use product.xxx
                                                    // or product["xxx"]
}                                                   // likewise for "1", "2", "3" and so on

Replace console.log with alert if you do not know what console is.

edited Aug 4, 2018 at 11:09

answered Apr 11, 2011 at 6:42

Salman Arshad

274k85 gold badges450 silver badges540 bronze badges

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

2 Comments

xkeshav Over a year ago

data.products.length returns undefined bcoz that "0" and "1" are not the child of products

dangermark Over a year ago

This is exactly what I was looking for. Thanks for poitning me in the right direction

kapa · Accepted Answer · 2011-04-11 06:38:20Z

1

Each of the product details can be accessed through data[iProductIndex.toString()] member. Data is stored inside data["0"] and data["1"], therefore to access them you need to convert integer value to string. Unfortunately you won't be able to use $.each loop because "0" and "1" are separate member objects. Use for loop with iProductIndex.

edited Apr 11, 2011 at 6:38

kapa

78.9k21 gold badges166 silver badges178 bronze badges

answered Apr 11, 2011 at 6:29

Daniel Protopopov

7,3163 gold badges27 silver badges44 bronze badges

1 Comment

dangermark Over a year ago

Any chance of a little example? I'm relatively new to jquery.

Daniel Protopopov · Accepted Answer · 2011-04-11 06:48:28Z

0

Data supplied does not allow for your answer, Salman A. See JSON Arrays for array definition, to have it work your way it must've been defined as

{"products" : [ {"product_no":"1087",
        "customer":"2",
        "bought_from":"1",
        "date_of_purchase":"2011-04-08",
        "method":"instore",
        "invoice":"0",
        "current":"1"} ] }

To OP: alert(data["0"].product_no); alert(data["1"]["date_of_purchase"]);

answered Apr 11, 2011 at 6:48

Daniel Protopopov

7,3163 gold badges27 silver badges44 bronze badges

Comments

xkeshav · Accepted Answer · 2011-04-11 06:54:44Z

try this

<script type="text/javascript">
var json_string={
    "logged_in":true,
    "firstname":"Joe",
    "surname":"Bloggs",
    "Full_name":"Joe Bloggs",
    "email":"[email protected]",
    "phone":"+123456789",
    "website":"",
    "age":"26-35",
    "street":"1 Street Ave",
    "city":"Townland",
    "state":"NA",
    "postcode":"1234",
    "country":"Australia",
    "products":2,
    "0":{
        "product_no":"1087",
        "customer":"2",
        "bought_from":"1",
        "date_of_purchase":"2011-04-08",
        "method":"instore",
        "invoice":"0",
        "current":"1"
    },
    "1":{
        "product_no":"24",
        "customer":"2",
        "bought_from":"1",
        "date_of_purchase":"2011-04-08",
        "method":"instore",
        "invoice":"0",
        "current":"1"
    }
};

for (key in json_string) {
// Most modern browsers should have hasOwnProperty by now.
// This keeps us from getting farther up the chain.
if (json_string.hasOwnProperty(key)) {
document.write(key + "->" + json_string[key]);
document.write("<br>");
}
}; 


var pro_1= json_string[0]; // here u change 0 with 1 and get the data of "1"

for (key in pro_1) {
if (pro_1.hasOwnProperty(key)) {
document.write(key + "->" + pro_1[key]);
document.write("<br>");
}
}; 

</script>

Collectives™ on Stack Overflow

Accessing data in a multidimensional JSON array with jQuery

4 Answers 4

2 Comments

1 Comment

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

2 Comments

1 Comment

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related