Recursive parsing of JSON object to construct HTML elements

问题

I'm attempting to build a set of HTML elements from a JSON object. I've managed to successfully construct the object from HTML elements, but the recursive rebuild keeps failing on me. Anyone have a good solution?

My JSON:

{
    "0": {
        "id": "text-1",
        "tag": "div",
        "style": {
            "left": "92px",
            "top": "37px",
            "z-index": "3",
            "height": "19px",
            "width": "98px",
            "font-weight": "bold",
            "font-style": "italic",
            "font-size": "16px",
            "color": "rgb(255, 255, 255)"
        },
        "data": {},
        "children": {
            "0": {
                "tag": "span",
                "style": {},
                "data": {},
                "html": "This is a test.",
                "text": "This is a test."
            }
        }
    },
    "1": {
        "id": "image-1",
        "tag": "div",
        "style": {
            "width": "100px",
            "height": "133px",
            "left": "91px",
            "top": "8px",
            "z-index": "1"
        },
        "data": {},
        "children": {
            "0": {
                "tag": "img",
                "style": {},
                "data": {},
                "html": "",
                "text": "",
                "src": "http://img2.etsystatic.com/000/0/6490841/il_570xN.351801334.jpg"
            }
        }
    },
    "2": {
        "id": "video-1",
        "tag": "div",
        "style": {
            "width": "100px",
            "height": "50px",
            "left": "5px",
            "top": "85px",
            "z-index": "2"
        },
        "data": {},
        "children": {
            "0": {
                "tag": "a",
                "style": {
                    "background-image": "url(http://placehold.it/100x50&text=Video)",
                    "height": "100%",
                    "width": "100%",
                    "display": "block",
                    "background-position": "0% 0%",
                    "background-repeat": "no-repeat no-repeat"
                },
                "data": {},
                "html": "",
                "text": ""
            }
        }
    }
}

回答1:

I've played a little and came up with this: http://jsfiddle.net/tfBRN/10/

considering that I have no idea for what is the data property and how html and text properties are related to each other, this code could be improved.

-edit-

I've assumed that the elements and children are given in array and not as numbered properties. And I've used jQuery to create elements, add properties and insert into DOM, but of course this can be performed using native DOM methods.

var domArray = [
    {
        "id": "text-1",
        "tag": "div",
        "style": {
            "left": "92px",
            "top": "37px",
            "z-index": "3",
            "height": "19px",
            "width": "98px",
            "font-weight": "bold",
            "font-style": "italic",
            "font-size": "16px",
            "color": "rgb(100, 100, 100)"
        },
        "data": {},
        "children": [
            {
                "tag": "span",
                "style": {},
                "data": {},
                "html": "This is a test.",
                "text": "This is a test."
            }
        ]
    },
    {
        "id": "image-1",
        "tag": "div",
        "style": {
            "width": "100px",
            "height": "133px",
            "left": "91px",
            "top": "8px",
            "z-index": "1"
        },
        "data": {},
        "children": [
            {
                "tag": "img",
                "style": {},
                "data": {},
                "html": "",
                "text": "",
                "src": "http://img2.etsystatic.com/000/0/6490841/il_570xN.351801334.jpg"
            }
        ]
    },
    {
        "id": "video-1",
        "tag": "div",
        "style": {
            "width": "100px",
            "height": "50px",
            "left": "5px",
            "top": "85px",
            "z-index": "2"
        },
        "data": {},
        "children": [
            {
                "tag": "a",
                "style": {
                    "background-image": "url(http://placehold.it/100x50&text=Video)",
                    "height": "100%",
                    "width": "100%",
                    "display": "block",
                    "background-position": "0% 0%",
                    "background-repeat": "no-repeat no-repeat"
                },
                "data": {},
                "html": "",
                "text": ""
            }
        ]
    }
];

$(document).ready(function(){
    for(var i=0;i<domArray.length;i++) {
        createDOMStructure(domArray[i]);
    }
});

function createDOMStructure(obj, parent) {
    if(parent == undefined) {
        parent = $("body"); // or any other element that would be the parent container of all structure
    }
    
    var element = $("<" + obj.tag + ">");
    delete obj.tag;
    
    if(obj.children) {
        for(var i=0;i<obj.children.length;i++) {
            createDOMStructure(obj.children[i], element);
        }
        delete obj.children;
    }
    
    element.css(obj.style);
    delete obj.style;
    
    element.text(obj.text);
    delete obj.text;

    for(var prop in obj) {
        element.attr(prop, obj[prop]);
    }
    
    $(element).appendTo(parent);
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>

回答2:

Take a look at my solutions on GitHub:

https://github.com/mlromramse/JsonDecorator

That piece of node app uses HandleBars to perform the recursion. It was made for a different problem but should be applicable for this as well.

来源：https://stackoverflow.com/questions/11616286/recursive-parsing-of-json-object-to-construct-html-elements