使用 jQuery 从 HTML 创建 JSON 对象

Posted 2023-02-24

【中文标题】使用 jQuery 从 HTML 创建 JSON 对象

【英文标题】：Create a JSON object from HTML using jQuery

【发布时间】：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() 函数）。你能举个例子吗？我不一定要求一个完整的解决方案（毕竟，这是一个虚构的例子）。只是朝着正确的方向迈出一步。

【参考方案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