Jquery multidimensional Json parse

Question

Hey all below is my sample json data, I am good in php but new to jquery ,

   "data":{
        "cipher":"true",
        "size":[
            "2.2 Mb",
            "6.11 Mb",
            "9.25 Mb",
            "18.49 Mb",
            "23.79 Mb",
        ],
        "prop":[
            "small",
            "small",
            "small",
            "medium",
            "medium",
        ]
    }

I want something like below php code in jquery.

$i = 0
foreach($arr[data] as $test){
    echo $arr[data][size][$i];
    echo $arr[data][prop][$i];
    $i++;
}

I tried something like below

if(typeof response =='object'){
    console.log("valid json");
    $.each(response.data, function(i, object) {
        $.each(object, function(property, value) {

        });
    }); 
}

stackoverflow.com/questions/4935632/parse-json-in-javascript — huan feng
– huan feng, Commented Nov 25, 2014 at 8:36

Jos de Jong · Accepted Answer · 2014-11-25 08:41:54Z

3

Please don't use jQuery for that. jQuery is a tool for HTML DOM operations. You can just use regular JavaScript.

You can do either a for loop on your data, or use .forEach on an Array:

arr.data.size.forEach(function (value, index) {
  console.log('arr.data.size[' + index+ ']=', value)
  console.log('arr.data.prop[' + index+ ']=', arr.data.prop[index])
})

This will output:

arr.data.size[0]= 2.2 Mb
arr.data.prop[0]= small
arr.data.size[1]= 6.11 Mb
arr.data.prop[1]= small
arr.data.size[2]= 9.25 Mb
arr.data.prop[2]= small
arr.data.size[3]= 18.49 Mb
arr.data.prop[3]= medium
arr.data.size[4]= 23.79 Mb
arr.data.prop[4]= medium

answered Nov 25, 2014 at 8:41

Jos de Jong

6,8973 gold badges48 silver badges63 bronze badges

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

2 Comments

Jos de Jong Over a year ago

thanks. There are some very nifty functions available for arrays: forEach, map, filter, slice, etc... you can Google for it. For looping over the keys of an object you can use Object.keys(array.data).forEach(...)

Leron Over a year ago

@JosdeJong I'm interested in your opinion. Do you think that jQuery in particular is not suitable for parsing JSON or you would prefer pure JavaScript instead any lib.

Nicolas Le Thierry d'Ennequin · Accepted Answer · 2014-11-25 09:39:08Z

3

Instead of jQuery, you should use a library like Underscore (http://underscorejs.org/) or Lodash (https://lodash.com/), which have a zip method that does just what you want.

(The purpose of jQuery is essentially to manipulate the DOM, the purpose of Underscore/Lodash is essentially to manipulate data.)

    <!DOCTYPE html>
    <html>
        <head>
            <script src="//code.jquery.com/jquery-2.1.1.min.js"></script>
            <script src="//cdnjs.cloudflare.com/ajax/libs/lodash.js/2.4.1/lodash.min.js"></script>
            <script>
            var data = JSON.parse('{"cipher":"true","size":["2.2 Mb","6.11 Mb","9.25 Mb","18.49 Mb","23.79 Mb"],"prop":["small","small","small","medium","medium"]}');
            var z = _.zip(data.size, data.prop); // It all happens here
            console.log(z);
            $("body").append(JSON.stringify(z));
            </script>
            <meta charset="utf-8">
            <title></title>
        </head>
        <body>
        </body>
    </html>

The console outputs an array of arrays:

[["2.2 Mb", "small"], ["6.11 Mb", "small"], ["9.25 Mb", "small"], ["18.49 Mb", "medium"], ["23.79 Mb", "medium"]]

See demo here: http://jsbin.com/rufeci/1/

edited Nov 25, 2014 at 9:39

answered Nov 25, 2014 at 8:43

Nicolas Le Thierry d'Ennequin

6,1645 gold badges40 silver badges58 bronze badges

2 Comments

Zim84 Over a year ago

You may want to explain why he shouldn't use jQuery but another lib

Tim Seguine Over a year ago

@NicolasLeThierryd'Ennequin I think that was a suggestion of how to improve your answer, not a request for comments.

RahulB · Accepted Answer · 2014-11-25 08:42:27Z

2

Jquery is not required for this. Simple iteration should work--

for(var i in data.size){
    console.log(data.size[i]);
}

for(var i in data.prop){
    console.log(data.prop[i]);
}

Demo-- http://jsfiddle.net/RahulB007/j6826qk1/

Check result in console.

answered Nov 25, 2014 at 8:42

RahulB

2,1101 gold badge21 silver badges28 bronze badges

8 Comments

Vishnu Over a year ago

i wanted in single loop..accepting jos de jong answer...+1 anywa

Tim Seguine Over a year ago

for (.. in ..) can have some issues. I prefer to avoid it.

RahulB Over a year ago

@TimSeguine : It do not have issues until used in wrong places. Although, simple for-loops(for(i=0;i<3;i++)) work everywhere. Anyways what kind of issues are we talking about?

Tim Seguine Over a year ago

@RahulB if someone modifies Array.prototype(which is legitimate although perhaps ill-advised) you can end up iterating over things that aren't actually in the array. It is probably unlikey to happen most of the time, but I prefer not to have to consider it.

RahulB Over a year ago

@TimSeguine : So this will affect the array itself. So if you iterate by any other looping method also, they will fail, not just above approach.

|

Collectives™ on Stack Overflow

Jquery multidimensional Json parse

3 Answers 3

2 Comments

2 Comments

8 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

2 Comments

2 Comments

8 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related