Access data in multidimensional JSON array using jQuery

Question

I am trying to figure out how to access data in a substantially multidimensional JSON array.

My jQuery AJAX request is as follows:

$("#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 returning. User account information, as well as a list of products that they have against their account.

 { "logged_in":true, "firstname":"Joe", "surname":"Bloggs", "Full_name":"Joe Bloggs", "email":" [e-mail] ", "phone":"[phone]", "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 warning about the first name, and this is normal. I can access everything in the first dimension using data.key, but I'm not sure how then I need to index the next dimension. Obviously, I would like to somehow display each of the products.

Suggestions would be welcome.

Answer 1

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

console.log (data.products.length + "product in data"); for (var i = 0; i <data.products.length; i ++) {var product = data.products [i]; console.log (product.product_no); // similarly for other fields} Strike>

 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 don't know which console.

Answer 2

Each product detail can be accessed through the data[iProductIndex.toString()] member. Data is stored inside data["0"] and data["1"] , so to access it you need to convert the integer value to a string. Unfortunately, you cannot use the $.each because "0" and "1" are separate member objects. Use for a loop with iProductIndex .

Answer 3

The data provided does not allow an answer, Salman A. See JSON Arrays for an array definition so that it works in its own way, ve is 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: alerts (data ["0"] product_no.); notifications (data ["1"] ["date_of_purchase"]);

Answer 4

try it

 <script type="text/javascript"> var json_string={ "logged_in":true, "firstname":"Joe", "surname":"Bloggs", "Full_name":"Joe Bloggs", "email":" [e-mail] ", "phone":"[phone]", "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>