Créer un objet JSON à partir de code HTML à l'aide de jQuery

Vue D'Ensemble Des Problèmes

Disons que j'ai un colis de bonbons. L'envoi a un certain nombre de cases, et chaque boîte a un certain nombre de types de bonbons. Chaque zone possède un identifiant unique, différent de tous les autres; le même est vrai pour les types de bonbons. En outre, un bonbon a d'autres traits, comme la couleur, la saveur et la quantité.

Exemple De Code

Prendre le code HTML suivant exemple:

<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>

Précédentes Tentatives

J'ai vu des exemples similaires de tableau d'analyse avec jQuery .map() fonction, et j'ai aussi vu de mention de .each(), mais j'ai été incapable de générer un code de travail.

De Sortie Désiré

Je veux générer (avec jQuery) un objet JSON similaire à la suivante:

{
    "shipment": {
        "a": {
            "1": {
                "color": "orange",
                "flavor": "orange",
                "qty": "7"
            },
            "2": {
                "color": "red",
                "flavor": "strawberry",
                "qty": "4"
            }
        },
        "b": {
            "3": {
                "color": "green",
                "flavor": "lime"
            }
        }
    }
}

Notes Complémentaires

Mon application utilise déjà jQuery largement, de sorte qu'il ressemble à une logique de l'outil pour le travail. Toutefois, si la plaine de 'ol JavaScript est un choix plus approprié, n'hésitez pas à le dire.

Le HTML est toujours va être bien formé et toujours allez suivre le format spécifié. Toutefois, dans certains cas, l'information peut être incomplète. Noter que le tiers des bonbons a pas de quantité indiquée, de sorte que la quantité a été tout simplement ignorés lors de la construction de l'objet.

Une combinaison de .each() et .find() devrait faire l'affaire. Commencer par le haut et de travailler votre chemin à l'intérieur des propriétés.
J'ai essayé quelque chose de similaire, mais je crois que j'ai rencontré le travail avec les enfants des enfants (par exemple, imbriqués .each() fonctions). Pourriez-vous s'il vous plaît poster un exemple? Je ne suis pas nécessairement en demandant une solution complète (après tout, c'est un exemple fictif). Juste une étape dans la bonne direction.

OriginalL'auteur Peter | 2013-03-28

Cela génère ce que vous avez demandé:

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/

Comme vous pouvez le voir, à chaque niveau, il utilise .each() d'une boucle sur les éléments correspondant à une certaine classe et puis .find().each() d'une boucle sur le désiré des enfants. Entre les deux, .data() est utilisé pour saisir l'souhaité data- attributs et de l'objet json est construite niveau par niveau.

Parfait, merci! Aussi, j'apprécie l'explication du code.

OriginalL'auteur Blazemonger

3

Est proche de ce que vous recherchez? – http://jsfiddle.net/4RPHL/

J'ai utilisé data() et JSON.stringify pour créer le json.

Assurez-vous de vérifier votre console sur laquelle j'ai connecté la sortie.
```
$(".candy").each(function() {
    console.log(JSON.stringify($(this).data()))
});
```
Simple et élégant. Cela semble être ce que je suis à la recherche pour. Comment puis-je nest la .each() fonction donc je ne peux .stringify de manière récursive?
OP spécifié que la sortie désirée devrait ressembler, et ce n'est pas ça.
Blazemonger: OP utilisé le mot "similaire"
Il est utile. Mais je ne suis toujours pas clair sur la façon de parvenir à la structure imbriquée.

OriginalL'auteur Chris

Problème de Nice! Merci à Chris' post, j'ai pu obtenir que cela fonctionne.

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

OriginalL'auteur Nolo

Vous devez vous connecter pour publier un commentaire.