javascript - Javascript 递归 JSON 到 HTML

Question

谁能帮我将以下 JSON 创建到以下 HTML 中？

我在递归方面很糟糕，甚至都不好笑。我在 SO 上找不到任何可以帮助我的东西，你会通过我的jsFiddle看到我有多好！

我试图把这个：

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 问题后的最佳尝试（参见我的 jsFiddle ）。我对递归感到很困惑：

更新：我越来越近了，但这太复杂了。似乎如果我做了一个 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;
}

更新：如果节点有子节点，处理节点的方式似乎有不同的行为。我有这张图片向您展示它为这个插件jOrgChart正确呈现：

Answer 1

我能够弄清楚，我只是在很多地方都有我的想法。这是答案：

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;
}