使用 jQuery 从 HTML 创建 JSON 对象答案

【问题标题】：Create a JSON object from HTML using jQuery使用 jQuery 从 HTML 创建 JSON 对象
【发布时间】：2013-03-19 10:39:13
【问题描述】：

问题概述

假设我有一批糖果。货物有多个盒子，每个盒子都有许多独特的糖果类型。每个盒子都有一个唯一的 id，与其他盒子不同；糖果类型也是如此。此外，糖果还具有其他特征，例如颜色、风味和数量。

示例代码

以下面的 HTML 示例为例：

<div class="shipment">
    <div class="box" data-boxid="a">
        <div class="candy" data-candyid="1" data-color="orange" data-flavor="orange" data-qty="7">
            <!-- unimportant content -->
        </div>
        <div class="candy" data-candyid="2" data-color="red" data-flavor="strawberry" data-qty="4">
            <!-- unimportant content -->
        </div>
    </div>
    <div class="box" data-boxid="b">
        <div class="candy" data-candyid="3" data-color="green" data-flavor="lime">
            <!-- unimportant content -->
        </div>
    </div>
</div>

以前的尝试

我看到过使用 jQuery 的 .map() 函数解析表的类似示例，也看到过提到 .each()，但我无法生成任何工作代码。

期望的输出

我想（使用 jQuery）生成一个 JSON 对象类似于，如下所示：

{
    "shipment": {
        "a": {
            "1": {
                "color": "orange",
                "flavor": "orange",
                "qty": "7"
            },
            "2": {
                "color": "red",
                "flavor": "strawberry",
                "qty": "4"
            }
        },
        "b": {
            "3": {
                "color": "green",
                "flavor": "lime"
            }
        }
    }
}

附加说明

我的应用程序已经广泛使用 jQuery，因此它似乎是适合这项工作的合乎逻辑的工具。但是，如果纯 'ol JavaScript 是更合适的选择，请随意说。

HTML 总是格式正确的，并且总是遵循指定的格式。但是，在某些情况下，信息可能不完整。 请注意，第三个糖果没有指定数量，因此在构建对象时会简单地忽略数量。

【问题讨论】：

.each() 和 .find() 的组合应该可以解决问题。从顶部开始，逐步进入内部属性。
我尝试过类似的方法，但我相信我遇到过与孩子的孩子一起工作（例如，嵌套的 .each() 函数）。你能举个例子吗？我不一定要求一个完整的解决方案（毕竟，这是一个虚构的例子）。只是朝着正确的方向迈出一步。

标签： javascript jquery json html-parsing scrape

【解决方案1】：

这会生成您要求的内容：

var json = {};   

$('.shipment').each(function(i,a) {
    json.shipment = {};

    $(a).find('.box').each(function(j,b) {
        var boxid = $(b).data('boxid');
        json.shipment[boxid] = {};

        $(b).find('.candy').each(function(k,c) {
            var $c = $(c),
                candyid = $c.data('candyid'),
                color = $c.data('color'),
                flavor = $c.data('flavor'),
                qty = $c.data('qty');
            json.shipment[boxid][candyid] = {};
            if (color) json.shipment[boxid][candyid].color = color;
            if (flavor) json.shipment[boxid][candyid].flavor = flavor;
            if (qty) json.shipment[boxid][candyid].qty = qty;
        });
   });
});

http://jsfiddle.net/mblase75/D22mD/

如您所见，在每个级别上，它使用.each() 循环遍历与某个类匹配的元素，然后.find().each() 循环遍历所需的子元素。在这两者之间，.data() 用于抓取所需的data- 属性，并逐级构建 json 对象。

【讨论】：

完美，谢谢！另外，我很欣赏代码的解释。

【解决方案2】：

这与您正在寻找的内容接近吗？ – http://jsfiddle.net/4RPHL/

我使用data() 和JSON.stringify 来创建json。

请务必检查我记录输出的控制台。

$(".candy").each(function() {
    console.log(JSON.stringify($(this).data()))
});

【讨论】：

简洁优雅。这似乎是我正在寻找的。如何嵌套 .each() 函数以便递归地使用 .stringify？
OP 指定了所需的输出应该是什么样子，这不是它。
Blazemonger：OP 使用了关键字“相似”
这很有帮助。但是我仍然不清楚如何实现嵌套结构。

【解决方案3】：

好问题！多亏了 Chris 的帖子，我才能让它工作。

var shipments = [],
    shipment  = {},
    boxes = {},
    candy = {};
$(".shipment").each(function() {
    var shipment = {},
        boxes = {};
    $(this).children().each(function(){
        var boxdata = $(this).data();
        candy = {};
        $(this).children().each(function(){
            var candydata = $(this).data();
            candy[candydata["candyid"]] = {
                color: candydata["color"],
                flavor: candydata["flavor"],
                qty: candydata["qty"]
            };
            boxes[boxdata["boxid"]] = candy;
        });
        //console.log(JSON.stringify(boxes)); // works
    });
    shipment = {shipment: boxes};
    shipments.push(shipment); // for multiples
});

console.log(JSON.stringify(shipments[0]));
console.log(shipments.length);  // 1 for the example html above

【讨论】：