3

问题概述

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

4

3 回答 3

8

这会生成您要求的内容：

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 对象。

于 2013-03-28T20:39:15.413 回答
3

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

我已经使用data()并JSON.stringify创建了 json。

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

$(".candy").each(function() {
    console.log(JSON.stringify($(this).data()))
});
于 2013-03-28T20:15:13.127 回答
1

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

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
于 2013-03-28T21:51:54.767 回答