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()ます。

望ましい出力

次のようなJSON オブジェクトを (jQuery を使用して) 生成したいと考えています。

{
    "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 は常に整形式であり、常に指定された形式に従います。ただし、場合によっては、情報が不完全な場合があります。 3 番目のキャンディーには数量が指定されていないことに注意してください。そのため、オブジェクトの作成中に数量が単純に無視されました。

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 に答える