1

JSONをjQueryで順序付けされていないリストに変換しようとしています。これは私のJSONデータです。

var myJSON = "{name:\"Director\",children:[name:\"Exe Director1\",name:\"Exe Director2\",name:\"Exe Director3\",children:[name:\"Sub Director1\",name:\"Sub Director2\",name:\"Sub Director3\",children:[name:\"Cameraman 1\",name:\"Cameraman 2\"]]]}";

期待される出力は

<ul>
    <li>Director
        <ul>
            <li>Exe Director 1</li>
            <li>Exe Director 2</li>
            <li>Exe Director 3
                <ul>
                    <li>Sub Director 1</li>
                    <li>Sub Director 2</li>
                    <li>Sub Director 3
                        <ul>
                            <li>Cameraman 1</li>
                            <li>Cameraman 2</li>
                        </ul>
                    </li>
                </ul>
            </li>
        </ul>
    </li>
</ul>

どうすればこれを実行できますか？

乾杯、

4

2 に答える 2

5

これはまさにあなたが必要とするものです：

jQueryテンプレートAPIを使用します。これはかつてjQueryの一部でしたが、現在はプラグインとしてのみ利用可能です。ただし、jQueryはまもなくこの手法または同様の手法を再び採用すると思います。

http://api.jquery.com/category/plugins/templates/

その非常に使いやすい：

$.tmpl("template", jsonObject)

ここに小さな基本的なテンプレートの例があります：

$.tmpl(
    "<li><b>${Id}</b>${Name}</li>", 
    [{Id:1, Name:"Werner"}, {Id:2, Name:"Klaus"}]
);

これにより、どこにでも追加できる次のjQueryHTML要素が作成されます。

  • 1ウェルナー
  • 2クラウス

    • 複雑なデータの場合、「{{each}}」テンプレート表記を使用してJSONサブオブジェクトを反復処理することもできます。データとテンプレートのコードは次のとおりです。

    var data = {name:"Director",children:[{name:"Exe Director1"},{name:"Exe Director2"},{name:"Exe Director3", children:[{name:"Sub Director3_1"},{name:"Sub Director3_2"},{name:"Sub Director3_3",children:[{name:"Cameraman3_3_1"},{name:"Cameraman3_3_2"}]}]}]};

var template = '\
    <ul>\
        <li>${name}\
            <ul>\
                {{each(childindex, child) children}}\
                    <li>${child.name}\
                        <ul>\
                            {{each(child2index, child2) child.children}}\
                                <li>${child2.name}</li>\
                            {{/each}}\
                        </ul>\
                    </li>\
                {{/each}}\
            </ul>\
        </li>\
    </ul>\
';

$('body').empty().append($.tmpl(template, data));

    ブラウザの結果：

    • 監督
      • エグゼディレクター1
      • エグゼディレクター2
      • エグゼディレクター3
        • サブディレクター3_1
        • サブディレクター3_2
        • サブディレクター3_3
        • ..。

    これは、ネストされたテンプレートを含めることで完全な再帰をサポートするように調整できます...しかし、怠惰な人であり、残りはあなたのためにやることです。

    乾杯、

    于 2012-10-04T15:07:34.070 に答える
    1

    再帰関数は次のように使用できます。関数が呼び出されるたびに、子「LI」とともに「UL」が返されます。

    function generateMenu(data) {

    var ul = $("<ul>");

        $(data).each(function (i, dir) {
             var li = $('<li>' + dir.name + '</li>');
             ul.append(li);

            if (dir.children != null && dir.children.length > 0) {
                li.append(generateMenu(dir.children));
            }

        });

    return ul;
};

    として使用してください：

    $("#some-div").append(generateMenu(myJsonData));

    Jsonは、

    var myJsonData = JSON.parse（'{"name"： "Director"、 "children"：[{"name"： "Exe Director1"}、{"name"： "Exe Director2"}、{"name"： " Exe Director3 "、" children "：[{" name "：" Sub Director1 "}、{" name "：" Sub Director2 "}、{" name "：" Sub Director3 "、" children "：[{" name " ："カメラマン1"}、{"名前"："カメラマン2"}]}]}]}'）;
    于 2016-05-18T11:35:59.037 に答える