jQuery parseJSON Multidimensional-array

Question

I have PHP outputting a JSON multidimensional array as follows:

{"rates":[{"meter":"30","rate":"0.15060","ppd":"10.000"}]}

However, I keep getting an error when trying to decode it on the JavaSCript side of things.

Uncaught TypeError: Cannot read property 'length' of null

Here is the code below for the jQuery side of things:

success: function (result) {
    console.log(result);
    $.each($.parseJSON(result), function (item, value) {
        if (item == "rates") {
            $.each($.parseJSON(value), function (i, object) {
                console.log(i + "=" + object);
            });
        }

The 1st console log gives me the output I mentioned at the top, but for some reason i am not able to access the array as I thought I would.

Any help is greatly appreciated :)

Solution 1

You don't need to call parseJSON again on value. It's already an object

var result='{"rates":[{"meter":"30","rate":"0.15060","ppd":"10.000"}]}';
console.log(result);
$.each($.parseJSON(result), function (item, value) {
    if (item == "rates") {
        $.each(value, function (i, object) {
            $.each(object, function (subI, subObject) {
                console.log(subI + "=" + subObject);
            });
        });

    }
});

Also, incase you were wondering the error was happening because you were trying to call parseJSON on an object and parseJSON expects a string so it was returning null to the each function which was then trying to do a for loop based on null.length

Solution 2

As you only want the content of one property, you don't need to loop through all the properties, so you don't need the nested loops. Just get the array and loop through it:

$.each($.parseJSON(result).rates, function (i, object) {
  console.log(i + "=" + object);
});

If you are using a method specifically for getting JSON, or if the content type is correctly set on the response, you shouldn't even parse the result, It's already parsed before the callback method is called:

$.each(result.rates, function (i, object) {
  console.log(i + "=" + object);
});

Solution 3

The program shows how to read json and store data into textbox

$(document).ready(function(){

$.getJSON("Test.json",function(data){

         $.each(data,function(key,value){
             alert(data[key].attrib1name);
             alert(data[key].attrib2name); 
             $('input').val(data[key].enterpriseName);
             activities=data[key].activities;
             console.log(value);
         });
     });    


});

Comments

[Felix Kling]

That's doesn't explain the error though. edit: Weird that I got a different error than the OP.

[Seán McCabe]

That fixed the error, but it isnt quite providing what I am after. I am now getting: "0=[object Object]"

[Felix Kling]

@SeánMcCabe: Well, that's because you are trying to convert an object to a string. This output is expected. The default string representation of an object is [object Object]. You could do console.log(i, object) instead.

[Lenny]

That is as expected. It's an array of objects. [] is an array containing 1 object {...}

[Lenny]

I just updated the code to include another each to output the individual values

[Lenny]

@FelixKling I added the reasoning to the answer.