javascript - 使用 jQuery 从 HTML 创建 JSON 对象

Question

问题概述

假设我有一批糖果。这批 cargo 有许多箱子，每个箱子里有许多独特的糖果类型。每个盒子都有一个独特的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 总是格式正确的，并且总是遵循指定的格式。但是，在某些情况下，信息可能不完整。 请注意，第三颗糖果没有指定数量，因此在构建对象时忽略了数量。

Answer 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()遍历所需的 child 。在这两者之间，.data() 用于获取所需的 data- 属性，并逐层构建 json 对象。