使用jQuery从HTML创建JSON对象

Question

问题概述

假设我有一批糖果.货物有许多盒子,每个盒子都有许多独特的糖果类型.每个盒子都有一个独特的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,因此它似乎是一个逻辑工具. 但是,如果简单的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()循环遍历所需的子级.在中间,.data()用于获取所需的data-属性,json对象逐级构建.