0

请指导我如何通过 jquery 解析任何 json 格式的数据。如果数据中有第 n 级嵌套，那么请告诉我如何解析它或在循环中迭代并在 alert() 中显示它们的键名和值。

帮助我构建单个 jquery 例程，该例程可以解析任何类型的 json 格式的数据，并在数据中嵌套第 n级。所以在这里我给出了一些 json 格式的样本数据集。

设置 1

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

第 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"
                }
            }
        }
    }
}

第 3 组

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

第 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;"
    }
}}

第 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" }
        ]
}

更新问题

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 );
});

如果我这样写代码....它工作吗？

嵌套的键和值可以这样迭代吗？请提及。谢谢

4

2 回答 2

1

您从一个具有n属性的对象开始。在 jQuery（使用函数）和原生 JavaScript（使用循环）中迭代这些n属性并显示它们的键值对非常简单。但是，该迭代只下降了一层。如果其中一个属性指向一个数组或另一个对象会发生什么？jQuery.each()for(key in object)

理想情况下，您将拥有一个递归函数，它检查属性值的类型，并相应地处理它；在非数组、非对象值的情况下，它只会输出键和值，否则它将遍历该嵌套数组或对象，做同样的事情。

像这样的东西：

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);
});

您可以在这个 jsFiddle 演示中看到它的实际效果。

于 2013-06-20T11:01:22.090 回答
0

这些可能会帮助您：

  • Array.prototype.indexOf - 返回可以在数组中找到给定元素的第一个索引，如果不存在则返回 -1
  • jQuery.each - 一个通用迭代器函数，可用于无缝迭代对象和数组
于 2013-06-20T08:41:57.417 回答