CODEWITHSUNDEEP
javascriptjqueryjsondom
Sam
Sam

Reputation: 333

Recursive function for DOM to JSON

I'm trying to create a JSON index of a particular section of HTML. Here is the HTML that I have:

<div class="box span12">
    <div class="row-fluid">
        <div class="item span12" data-width-helper="12"></div>
    </div>
    <div class="row-fluid">
        <div class="box span6">
            <div class="row-fluid">
                <div class="item span12" id="4" data-width-helper="12"></div>
            </div>
            <div class="row-fluid">
                <div class="box span6">
                    <div class="row-fluid">
                        <div class="item span12" id="6" data-width-helper="12"></div>
                    </div>
                    <div class="row-fluid">
                        <div class="item span12" id="7" data-width-helper="12"></div>
                    </div>
                </div>
                <div class="item span6" id="5" data-width-helper="6"></div>
            </div>
        </div>
        <div class="item span6" data-width-helper="6"></div>
    </div>
    <div class="row-fluid">
        <div class="item span8" id="2" data-width-helper="8"></div>
        <div class="item span4" id="3" data-width-helper="4"></div>
    </div>
</div>

Ultimately, I'd like to end up with JSON that looks like this:

[
    [
        {
            "id":1,
            "width":12
        }
    ],
    [
        {
            "width":6,
            "items":
            [
                [
                    {
                        "id":4,
                        "width":12
                    }
                ],
                [
                    {
                        "width":6,
                        "items":
                        [
                            [
                                {
                                    "id":6,
                                    "width":12
                                }
                            ],
                            [
                                {
                                    "id":7,
                                    "width":12
                                }
                            ]
                        ]
                    },
                    {
                        "id":5,
                        "width":6
                    }
                ]
            ]
        },
        {
            "id":8,
            "width":6
        }
    ],
    [
        {
            "id":2,
            "width":8
        },
        {
            "id":3,
            "width":4
        }
    ]
]

So basically, each box holds an array of rows, which holds an array of items, which are objects with a little descriptive information. I can't seem to wrap my head around a recursive function that will build out that json object so that there can be boxes instead of items going down unlimited levels.

Hopefully someone smarter than me can take the time to help out - I'd really appreciate it. And as a side note, I'm fine with using jQuery and/or Underscore.js

Upvotes: 0

Views: 247

Answers (1)

uber5001
uber5001

Reputation: 3954

I'm not entirely sure how you want the function to work, so I just wrote a bit of psuedocode for you. The goal here was to make every tag into an array of its children, unless the tag was an item, in which case, it creates an object with "width" and "id" instead.

function toJSON(element)
    var returnObject;
    switch
        case: item
            returnObject = {
                "id": elementId,
                "width": elementWidth
            };
            break;
        case: default
            returnObject = [];
            for each child
                returnObject.push(toJSON(child));
            break;
    return returnObject;

Upvotes: 3

Related Questions