Jquery loop in dynamic JSON data

Question

Hye.. i'm sorry if this question already asked. I'm trying to iterate through a JSON data using javascript/jquery. The JSON data is retrieve with '$.getJson' function. My problem is the JSON data will have unlimited depth. sorry for the short question. Thanks

{
    "title": "perkhidmatan utama agensi",
    "description": "",
    "layout": "1",
    "likerscale": "",
    "elemen": [
        {
            "title": "Sila tandakan dan nyatakan lokasi di mana Tuan/Puan menerima perkhidmatan. (Ibu Pejabat/Negeri/Cawangan)",
            "elemen": [
                {
                    "title": "lokasi perkhidmatan",
                    "description": "",
                    "elemen": [
                        {
                            "title": "ibu pejabat",
                            "checkbox": "1",
                            "radio": "0",
                            "input": "0",
                            "textarea": "0",
                            "select": "0"
                        },
                        {
                            "title": "Negeri/Cawangan (Sila nyatakan)",
                            "checkbox": "1",
                            "radio": "0",
                            "input": "1",
                            "textarea": "0",
                            "select": "0"
                        }
                    ]
                }
            ]
        },
        {
            "title": "Sila tandakan (<span class='icon icone-check'></span>) pada mana-mana ruangan berkenaan mengenai jenis perkhidmatan utama agensi ini yang pernah anda berurusan",
            "elemen": [
                {
                    "title": "perkhidmatan utama JPN",
                    "description": "",
                    "elemen": [
                        {
                            "title": "Kad Pengenalan",
                            "checkbox": "1",
                            "radio": "0",
                            "input": "0",
                            "textarea": "0",
                            "select": "0"
                        },
                        {
                            "title": "Kelahiran, Kematian dan Anak Angkat",
                            "checkbox": "1",
                            "radio": "0",
                            "input": "0",
                            "textarea": "0",
                            "select": "0"
                        },
                        {
                            "title": "Kewarganegaraan",
                            "checkbox": "1",
                            "radio": "0",
                            "input": "0",
                            "textarea": "0",
                            "select": "0"
                        },
                        {
                            "title": "Perkahwinan dan Perceraian",
                            "checkbox": "1",
                            "radio": "0",
                            "input": "0",
                            "textarea": "0",
                            "select": "0"
                        },
                        {
                            "title": "Lain-lain",
                            "checkbox": "1",
                            "radio": "0",
                            "input": "0",
                            "textarea": "0",
                            "select": "0"
                        }
                    ]
                }
            ]
        }
    ]
}

Its been said a million times, but can you provide code or anything you have tried? — cgatian, Apr 25 '13 at 13:11
possible duplicate of [I have a nested data structure / JSON, how can I access a specific value?](http://stackoverflow.com/questions/11922383/i-have-a-nested-data-structure-json-how-can-i-access-a-specific-value) — Felix Kling, Apr 25 '13 at 13:15
@ArunPJohny i just want to create a nested box for each 'elemen'. All i need is a function that can loop through the JSON and print the string. — John Pozy, Apr 25 '13 at 13:43
@FelixKling i'm want to print all the value and not accessing a specific value here. but thanks for the link :) — John Pozy, Apr 25 '13 at 13:45
@John: In that answer I also explain how to access properties with unknown depth. — Felix Kling, Apr 25 '13 at 13:47

Chris Dixon · Accepted Answer · 2013-04-25T13:12:36.437

1

You need a recursive function here, this should do it:

var data = yourJsonArray;

function drillDownArray(data) {
   // Main attributes
   var title = data.title;
   var description = data.description;

   $.each(data.elemen, function(i, v) {
       // Each element
       var title = v.title;
       drillDownArray(v);
   }
}

drillDownArray(data);

edited Apr 25 '13 at 13:12

answered Apr 25 '13 at 13:11

Chris Dixon

9,147
5
36
68

Thanks for the code. Your code return an error in my browser console 'Uncaught TypeError: Cannot read property 'length' of undefined' – John Pozy Apr 25 '13 at 13:49
Could you make a jsFiddle of your current code with this? I'll get it fixed for you. – Chris Dixon Apr 25 '13 at 13:50

Jquery loop in dynamic JSON data

1 Answers1