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) {

        });
    }); 
}

http://stackoverflow.com/questions/4935632/parse-json-in-javascript — huan feng, Nov 25 '14 at 08:36

score 3 · Accepted Answer · answered Nov 25 '14 at 08:41

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 '14 at 08:41

Jos de Jong

6,602
3
38
58

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(...)` – Jos de Jong Nov 25 '14 at 08:52
@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`. – Leron Nov 25 '14 at 12:04

Nicolas Le Thierry d'Ennequin · Answer 2 · 2014-11-25T09:39:08.573

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/

You may want to explain _why_ he shouldn't use jQuery but another lib — Zim84, Nov 25 '14 at 08:45
@NicolasLeThierryd'Ennequin I think that was a suggestion of how to improve your answer, not a request for comments. — Tim Seguine, Nov 25 '14 at 09:26

score 2 · Answer 3 · answered Nov 25 '14 at 08:42

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 '14 at 08:42

RahulB

2,070
1
18
26

i wanted in single loop..accepting jos de jong answer...+1 anywa – Vishnu Nov 25 '14 at 08:47
`for (.. in ..)` can have some issues. I prefer to avoid it. – Tim Seguine Nov 25 '14 at 09:28
@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? – RahulB Nov 25 '14 at 09:50
@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. – Tim Seguine Nov 25 '14 at 09:52
@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. – RahulB Nov 25 '14 at 09:59
@RahulB not if you loop by indices. Because it won't affect length. – Tim Seguine Nov 25 '14 at 10:00
@TimSeguine : Some what correct. I found a S.O question regarding this-- http://stackoverflow.com/questions/2265167/why-is-forvar-item-in-list-with-arrays-considered-bad-practice-in-javascript – RahulB Nov 25 '14 at 10:05
@RahulB I know that link. I probably should have linked it myself. The answer also covers something I forgot to mention, that the iteration ordering is not defined. The inheritance problem is enough for me though. – Tim Seguine Nov 25 '14 at 10:06

Jquery multidimensional Json parse

3 Answers3