Create a JSON object from HTML using jQuery

Question

Problem Overview Let's say I have a shipment of candy. The shipment has a number of boxes, and each box has a number of unique candy types. Every box has a unique id, different from every other box; the same is true for candy types. Furthermore, a candy has additional traits, like color, flavor and quantity. Example Code Take the following HTML example: ```

``` Previous Attempts I've seen similar examples of table parsing with jQuery's `.map()` function, and I've also seen mention of `.each()`, but I've been unable to…

Accepted Answer

This generates what you asked for:

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

As you can see, at each level it uses `.each()` to loop through the elements matching a certain class and then `.find().each()` to loop through the desired children. In between, `.data()` is used to grab the desired `data-` attributes and the json object is built level by level.

Create a JSON object from HTML using jQuery

Solution

Problem