0

just guide me how can i parse any kind of data in json format by jquery. if there is nth level of nesting in data then please tell me how could i parse it or iterate in loop and show their key name & value in alert().

help me to construct single jquery routine which can parsing any kind of data in json format with nth level of nesting in data. so here i am giving few sample set of data in json format.

SET 1

{
"employees": [
{ "firstName":"John" , "lastName":"Doe" },
{ "firstName":"Anna" , "lastName":"Smith" },
{ "firstName":"Peter" , "lastName":"Jones" }
]
}

SET 2

{
    "glossary": {
        "title": "example glossary",
        "GlossDiv": {
            "title": "S",
            "GlossList": {
                "GlossEntry": {
                    "ID": "SGML",
                    "SortAs": "SGML",
                    "GlossTerm": "Standard Generalized Markup Language",
                    "Acronym": "SGML",
                    "Abbrev": "ISO 8879:1986",
                    "GlossDef": {
                        "para": "A meta-markup language, used to create markup languages such as DocBook.",
                        "GlossSeeAlso": ["GML", "XML"]
                    },
                    "GlossSee": "markup"
                }
            }
        }
    }
}

SET 3

{"menu": {
  "id": "file",
  "value": "File",
  "popup": {
    "menuitem": [
      {"value": "New", "onclick": "CreateNewDoc()"},
      {"value": "Open", "onclick": "OpenDoc()"},
      {"value": "Close", "onclick": "CloseDoc()"}
    ]
  }
}}

SET 4

{"widget": {
    "debug": "on",
    "window": {
        "title": "Sample Konfabulator Widget",
        "name": "main_window",
        "width": 500,
        "height": 500
    },
    "image": { 
        "src": "Images/Sun.png",
        "name": "sun1",
        "hOffset": 250,
        "vOffset": 250,
        "alignment": "center"
    },
    "text": {
        "data": "Click Here",
        "size": 36,
        "style": "bold",
        "name": "text1",
        "hOffset": 250,
        "vOffset": 100,
        "alignment": "center",
        "onMouseUp": "sun1.opacity = (sun1.opacity / 100) * 90;"
    }
}}

SET 5

{
    "id": "0001",
    "type": "donut",
    "name": "Cake",
    "ppu": 0.55,
    "batters":
        {
            "batter":
                [
                    { "id": "1001", "type": "Regular" },
                    { "id": "1002", "type": "Chocolate" },
                    { "id": "1003", "type": "Blueberry" },
                    { "id": "1004", "type": "Devil's Food" }
                ]
        },
    "topping":
        [
            { "id": "5001", "type": "None" },
            { "id": "5002", "type": "Glazed" },
            { "id": "5005", "type": "Sugar" },
            { "id": "5007", "type": "Powdered Sugar" },
            { "id": "5006", "type": "Chocolate with Sprinkles" },
            { "id": "5003", "type": "Chocolate" },
            { "id": "5004", "type": "Maple" }
        ]
}

UPDATE Question

var obj ={
        "id": "0001",
        "type": "donut",
        "name": "Cake",
        "ppu": 0.55,
        "batters":
            {
                "batter":
                    [
                        { "id": "1001", "type": "Regular" },
                        { "id": "1002", "type": "Chocolate" },
                        { "id": "1003", "type": "Blueberry" },
                        { "id": "1004", "type": "Devil's Food" }
                    ]
            },
        "topping":
            [
                { "id": "5001", "type": "None" },
                { "id": "5002", "type": "Glazed" },
                { "id": "5005", "type": "Sugar" },
                { "id": "5007", "type": "Powdered Sugar" },
                { "id": "5006", "type": "Chocolate with Sprinkles" },
                { "id": "5003", "type": "Chocolate" },
                { "id": "5004", "type": "Maple" }
            ]
    }

$.each( obj, function( key, value ) {
      alert( key + ": " + value );
});

if i write the code this way....does it work??

nested key & value can be iterated this way? please mention. thanks

Thomas
  • 33,544
  • 126
  • 357
  • 626

2 Answers2

1

You start with an object that has n properties in it. Iterating over those n properties and displaying their key-value pairs is pretty trivial, both in jQuery (using the jQuery.each() function) and native JavaScript (using a for(key in object) loop). However, that iteration only goes down one level; what happens if one of those properties points to an array or to another object?

Ideally what you'd have is a recursive function that checks the type of the property's value, and handles it accordingly; in the case of a non-array, non-object value it would just output the key and value, otherwise it would iterate over that nested array or object, doing the same thing.

Something like this:

function iterateObject(key, obj) {
    if(typeof obj == "object") {
        console.log(key + ":");
        $.each(obj, function(key, obj) {
            iterateObject(key, obj);
        });
    }
    else if(typeof obj == "array") {
        console.log(key + ":");
        $.each(obj, function(i, value) {
            iterateObject(i, value);
        });
    }
    else {
        // not an object, not an array - need to output it.
        console.log(key + ": " + obj);
    }
}

$.each(obj, function(key, obj) {
    iterateObject(key, obj);
});

You can see it in action in this jsFiddle demo.

Anthony Grist
  • 38,173
  • 8
  • 62
  • 76
  • great snippet....suggest me the best way to parse json. when json render at client side from server side then first i have to check how json look and then i have to little bit R&D to parse json. so guide me to easy way parse any json 1 or 2 level not nth level. – Thomas Jun 20 '13 at 11:53
0

These may help you out:

  • Array.prototype.indexOf - Returns the first index at which a given element can be found in the array or -1 if it is not present
  • jQuery.each - A generic iterator function which can be used to seamlessly iterate over both objects and arrays
Petja
  • 584
  • 1
  • 6
  • 20