Question

我正在尝试从JSON对象构建一组HTML元素。我已经设法从HTML元素成功构造对象，但递归重建对我来说仍然失败。任何人都有一个很好的解决方案？

我的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": ""
            }
        }
    }
}

Answer 1

我玩了一点，想出了这个：http://jsfiddle.net/tfBRN/10/

考虑到我不知道data属性是什么以及html和text属性如何相互关联，可以改进此代码。

<强> -edit -

我假设元素和子元素是以数组形式给出的，而不是数字属性。我使用jQuery创建元素，添加属性并插入DOM，但当然这可以使用本机DOM方法执行。

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>

Answer 2

在GitHub上查看我的解决方案：

https://github.com/mlromramse/JsonDecorator

该节点应用使用HandleBars来执行递归。它是针对不同的问题而制定的，但也适用于此。

递归解析JSON对象以构造HTML元素

2 个答案: