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

【问题标题】：Recursive parsing of JSON object to construct HTML elements递归解析 JSON 对象以构造 HTML 元素
【发布时间】：2012-07-21 21:51:06
【问题描述】：

我正在尝试从 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": ""
            }
        }
    }
}

【问题讨论】：

嗯...您还没有显示您的实际递归代码，所以我们无法回答您。最重要的是，您已经设法以一种比使用比 XML (JSON) 更简洁而闻名的序列化格式简单地序列化 XML 本身更加臃肿的方式重新创建 XML。如果这是来自 AJAX 请求，为什么不直接使用 responseXML 参数，获取根节点，然后将其附加到您想要的 HTML 文档中？
你应该真正使用数组而不是整数属性对象...
那个花哨的“html”属性是什么？
我认为传递一个对象数组会更自然，而不是将每个标签分配给具有整数编号索引的属性
请贴出一些递归代码。

标签： javascript jquery json recursion

【解决方案1】：

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

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

-编辑-

我假设元素和子元素是在数组中给出的，而不是作为编号属性。我使用 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);
}

&lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"&gt;&lt;/script&gt;

【讨论】：

我将努力更新对象以生成数组而不是编号索引，但我认为您已经搞定了。 'data' 属性用于存储与将针对元素运行的函数相关的各种数据位。 'html' 和 'text' 几乎可以互换，现在我已经映射了所有属性。熨平后忘记删除“html”属性。将您的解决方案标记为答案。谢谢你:)
我已经更新了对象以反映您小提琴中建议的结构，并且能够在我的控制台中记录正确构建的元素。但是，尽管已将“父级”分配给 $("#container")，但仍将其分配给 Window。有什么想法吗？
通过删除条件并显式分配 var 解决了该问题。再次感谢您的出色解决方案:)

【解决方案2】：

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

https://github.com/mlromramse/JsonDecorator

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

【讨论】：