0

次の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の質問を実行した後の私の最善の試みです（My 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で正しくレンダリングされることを示しています。 ここに画像の説明を入力

4

1 に答える 1

0

私はそれを理解することができました、私はただ非常に多くの場所で私の心を持っていました. 答えは次のとおりです。

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;
}
于 2013-08-24T17:52:44.437 に答える