Javascript将JSON递归为HTML

有人能帮我把下面的JSON创建成下面的HTML吗

我太不擅长递归了，一点都不好笑。我找不到任何东西，所以我需要什么来帮助我，你可以从我的中看出我有多差

我正试图扭转这一局面：

var data = [
    {
        "node_id":1,
        "children":[]
    },
    {
        "node_id":2,
        "children":[]
    },
    {
        "node_id":3,
        "children":[
            {
                "node_id":4,
                "children":[]
            },
            {
                "node_id":5,
                "children":[
                    {
                        "node_id":6,
                        "children":[]
                    },
                    {
                        "node_id":7,
                        "children":[]
                    }
                ]
            }
       ]
    }
];

<ul>
<li>1
    <ul>
        <li>2
        <ul>
            <li>3
                <ul>
                    <li>4</li>
                    <li>5
                        <ul>
                            <li>6</li>
                            <li>7</li>
                        </ul>
                    </li>
                </ul>
            </li>
        </ul>
    </ul>
</li>
</ul>

进入这个：

var data = [
    {
        "node_id":1,
        "children":[]
    },
    {
        "node_id":2,
        "children":[]
    },
    {
        "node_id":3,
        "children":[
            {
                "node_id":4,
                "children":[]
            },
            {
                "node_id":5,
                "children":[
                    {
                        "node_id":6,
                        "children":[]
                    },
                    {
                        "node_id":7,
                        "children":[]
                    }
                ]
            }
       ]
    }
];

<ul>
<li>1
    <ul>
        <li>2
        <ul>
            <li>3
                <ul>
                    <li>4</li>
                    <li>5
                        <ul>
                            <li>6</li>
                            <li>7</li>
                        </ul>
                    </li>
                </ul>
            </li>
        </ul>
    </ul>
</li>
</ul>

一,

二,

三,

四,
五,

六,
七,

这是我在浏览了一些SO问题后的最佳尝试（）。我被递归弄糊涂了：

更新：我越来越接近了，但这太复杂了。似乎如果我做了document.createElement并附加了子元素，它可能会工作得更好

function recursion(data, is_child, first_call) {

    if (is_child != true) {
        var output = '<ul id="org">\n';
    }
    else if (is_child == true && first_call == true) {
        var output = '<ul>\n';
    }
    var len = data.length;
    for (var i = 0; i < len; i++)
    {
        if (is_child == true && first_call == true) {
            output += '<li>'+ data[i].node_id +'</li>\n';
        } else {
            output += '<li>'+ data[i].node_id +'\n';
        }

        if (data[i].children.length > 0) {
            if (is_child == true && first_call != true) {
                first_call = true
            } else {
                first_call = false
            }
            output += recursion(data[i].children, true, first_call);
        }
        else {
            if (is_child == true && first_call != true) {
                output += '</li>';
            }

            if (typeof data[i+1] != 'undefined') {
                output += '<ul>\n';
            } else {
                // Close all the items that are not closed
                for (var j = 0; j < i; j++) {
                    output += '</li></ul>\n'
                }
                output += '</li>\n'
            }
        }

    }
    output += '</ul>\n';

    return output;
}

函数递归（数据，是子对象，第一次调用）{
if（is_child！=真）{
var输出='
\n'；
}
else if（is_child==true&&first_call==true）{
变量输出='
\n'；
}
var len=data.length；
对于（变量i=0；i\n'；
}否则{
输出+='
'+数据[i]。节点id+'\n'；
}
if（数据[i].children.length>0）{
if（is_child==true&&first_call！=true）{
第一次呼叫=真
}否则{
第一次呼叫=错误
}
输出+=递归（数据[i]。子项，true，第一次调用）；
}
否则{
if（is_child==true&&first_call！=true）{
输出+='
'；
}
if（数据类型[i+1]！=“未定义”）{
输出+='
\n'；
}否则{
//关闭所有未关闭的项目
对于（var j=0；j

更新：如果节点有子节点，则处理该节点的方式似乎有不同的行为。我用这张图片向您展示了该插件的正确渲染：

---

我能想出来，我只是把我的思想放在了很多地方。答案如下：

recursion = function(data, is_child) {
    var output = '';
    if (typeof is_child == 'undefined') {
        is_child = false;
    }

    // start:ul (only one of these)
    if (is_child == false) {
        output += '<ul id="org">\n';
    }

    // end:ul
    var len = data.length;
    for (var i = 0; i < len; i++)
    {
            // If this is a child loop, and its the first iteration, it
        // has a special case:
        // <ul>
        // <li>first</li>
        // <li>second<ul>
        var first_child_item = false;
        if (is_child == true && i == 0) {
            first_child_item = true;
        }

        // open:main wrapper
        if (first_child_item == true) {
            output += '<ul class="first_child_item">\n';
            output += '<li>' + data[i].node_id + '</li>\n';
            continue;
        } else {
            if (is_child) {
                // When there is a child with another beside it
                output += '<li>' + data[i].node_id;
            } else {
                // the main low level call
                output += '<ul class="low_level">\n';
                output += '<li>' + data[i].node_id;
            }
        }

        // open:children seek
        if (data[i].children.length > 0)
        {
            output += recursion(data[i].children, true);
        }

        // close pending tags
        if (typeof data[i+1] == 'undefined')
        {
            for (var j = 0; j < i; j++) {
                output += '</li>\n';
                output += '</ul>\n';
            }
        }
    }
    // end main:ul (only one of these)
    output += '</ul>\n';

    return output;
}

recursion=函数（数据，是子对象）{
var输出=“”；
if（typeof is_child==“未定义”）{
is_child=false；
}
//开始：ul（仅其中一个）
if（is_child==false）{
输出+='
\n'；
}
//完:ul
var len=data.length；
对于（变量i=0；i
//
首先
//
秒

var first_child_item=false；
如果（is_child==true&&i==0）{
第一个子项=真；
}
//打开：主包装
if（第一个子项==true）{
输出+='
\n'；
输出+='
'+数据[i]。节点id+'
\n'；
继续；
}否则{
如果（是孩子）{
//当旁边有一个孩子和另一个孩子在一起时
输出+='
'+数据[i]。节点id；
}否则{
//主要的低级呼叫
输出+='
\n'；
输出+='
'+数据[i]。节点id；
}
}
//开放：儿童寻求
if（数据[i].children.length>0）
{
输出+=递归（数据[i]。子项，true）；
}
//关闭挂起的标记
if（数据类型[i+1]=“未定义”）
{
对于（var j=0；j

您确定上面粘贴的html是您指定的输出吗？在我看来，节点1和节点2不应该有任何子节点。我不这么认为。我正试图将其插入jQuery流程图插件“jOrgChart”，例如@，您可以看到它们嵌套元素的源代码非常有趣。我同意@JustinBicknell的观点，在您的示例输出中，您处理节点2和3的方式与处理节点4和5的方式不同。在JSON中，这两对都是兄弟，但在示例HTML中，第一对是父/子。也许我读错了。盯着它看太久了。但这就是我的html的样子：--如果一个节点有两个子节点，它将创建一个UL。我正在尝试匹配这个插件。