Javascript object traversal

Question

I need Help regarding the traversal of each and every elements in the following JSON and get both key and value and print it like an unordered list.

var dataSource = ({
                "Items": ({
                    "Deserts": ({}),
                    "Veg": ({
                        "VegPulao": "Veg Pulao",
                        "PalakPaneer": "Palak Paneer",
                        "PaneerButterMasala": "Paneer Butter Masala"
                    }),

                    "Chicken": ({
                        "Tandoori": "Tandoori special"
                    }),
                    "Hot drinks": ({
                        "Coffe": ({ "Hot": "Hot Coffe", "Medium": "Medium", "Others": ({ "Iris": "Iris Coffe", "Capuccino": "Capuccino" }) }),
                        "Tea": ({"Red": "Red Tea", "Black": "Black Tea"}),
                        "BadamMilk": "Hot Badam Milk",
                        "Bornvita": "Hot Bornvita",
                        "Milk": "Hot Milk"
                    }),
                    "Juice": ({
                        "Mango": "Mango",
                        "Berry": "Berry",
                        "Grapes": "Grapes",
                        "Wine": ({
                            "Rose": "Rose",
                            "Red wine": "Red",
                            "Apple": "Apple",
                            "Hard drinks": ({
                                "Royal challenge": "Royal challenge",
                                "Blender's Pride": "Blender's Pride"
                            })
                        })
                    })

                })
            });

What you are try for achieve goal?? Please paste your code also — Jalpesh Patel, Jan 24 '14 at 07:13
and [How do I enumerate the properties of a javascript object?](http://stackoverflow.com/q/85992/218196) — Felix Kling, Jan 24 '14 at 07:15
i want to print each and every values and key in this JSON inside a div element. so trying to figure it out.Sir Need some help — , Jan 24 '14 at 07:15
Also note that you have a *JavaScript object* in your example, **not** JSON. Even if you get the data as JSON, once it is parsed, you are dealing with regular JavaScript objects and arrays. The problem is not about JSON but how to process JavaScript objects/arrays. — Felix Kling, Jan 24 '14 at 07:15
The () should be [] if you're referring to an json array, use http://jsonlint.com/ to verify your JSON. After verifying if you have a correct JSON. $.parseJSON(yourJSONString) put that to a variable and access it like jsonObj.key[index].key or something like that. Provide more information jsfiddle or something to get more help :) — Victor Soto, Jan 24 '14 at 07:25
@VictorSoto: Why should the `()` be `[]`? It's just the grouping operator. They are **completely** unnecessary, but they are perfectly valid. It's true that the same data wouldn't be valid JSON, but it's certainly valid JavaScript, and that's what we have here. — Felix Kling, Jan 24 '14 at 07:28
so if its not JSON, then i agee with you, but give me a solution to atleast get this thing printed out with javascript — , Jan 24 '14 at 11:27

score 1 · Accepted Answer · answered Jan 25 '14 at 15:05

1

It is not clear exactly what form of output you want, but here's a method of traversing your data structure and generating some indented output. Also, parentheses are not necessary in your data definition (I have removed them to make the data easier to read).

function output(str, level) {
    var obj = document.getElementById("output");
    var div = document.createElement("div");
    var node = document.createTextNode(str);
    div.style.marginLeft = (level * 20) + "px";
    div.appendChild(node);
    obj.appendChild(div);
}

function traverseObject(obj, level) {
    for (var prop in obj) {
        if (typeof obj[prop] === "object") {
            output(prop, level);
            traverseObject(obj[prop], level + 1);
        } else {
            output(prop + ": " + obj[prop], level);
        }
    }
}

traverseObject(dataSource, 0);

Working demo: http://jsfiddle.net/jfriend00/6kAn3/

answered Jan 25 '14 at 15:05

jfriend00

683,504
96
985
979

1

Thank you verymuch sir, it is a helpful code.. can i get you email address, i want to be your friend – Jan 25 '14 at 15:11
This is the Perfect code , thanks to jfriend00. The case is closed – Jan 25 '14 at 16:33
1

@user3067443 - Since it looks like you may be new to StackOverflow, do you know that on StackOverflow if you get a good answer, you are supposed to select a "best answer" by clicking on the checkmark to the left of the answer? That tells the community that your question has been answered, rewards that person who provided the answer and earns you some reputation points for following the proper procedure. – jfriend00 Jan 25 '14 at 16:53

Javascript object traversal

1 Answers1

Linked