6

<div>タイトルに記載されているように、ネストを使用して JSON ツリーをレンダリングする方法を探しています。以下はデータのサンプルです (ツリーには最大 8 つのレベルがあります)。

{
    "children": {
        "Bacteria": {
            "children":{
                "Verrucomicrobia":{
                    "children":{
                        "Methylacidiphilae":{
                            "children":{
                                "Methylacidiphilales":{
                                    "children":{},
                                    "count":2,
                                    "level":"order",
                                    "name":"Methylacidiphilales",
                                    "score":1.46
                                }
                            },
                            "count":2,
                            "level":"class",
                            "name":"Methylacidiphilae",
                            "score":1.46
                        }
                    },
                    "count":2,
                    "level":"phylum",
                    "name":"Verrucomicrobia",
                    "score":1.46
                }
            },
            "count":2,
            "level":"kingdom",
            "name":"Bacteria",
            "score":1.46
        }
    },
    "count":0,
    "level":"root",
    "name":"Root",
    "score":0.0
}

JSON ツリーを取得/解析して、変数に保存できます。ここで、ツリーを再帰的にトラバースする必要があり、次のいずれかを行います。

  1. 各ノードを HTML としてレンダリングできるものにします。
  2. 新しいノードを作成divし、新しいツリーに追加します。

しかし、どのように？

4

1 に答える 1

12

ほとんどまたはまったく問題なく、生の JS でこれを行うことができます。

function json2html(json) {
    var i, ret = "";
    ret += "<ul>";
    for( i in json) {
        ret += "<li>"+i+": ";
        if( typeof json[i] === "object") ret += json2html(json[i]);
        else ret += json[i];
        ret += "</li>";
    }
    ret += "</ul>";
    return ret;
}

オブジェクトでその関数を呼び出すだけで、ネストされたリストのセットとして HTML が返されます。もちろん、必要に<div>応じて s だけを使用するように変更することもできます。

appendChild編集:そして、これはDOM要素を使用し、または同様に挿入できるノードを返すバージョンです:

function json2html(json) {
    var i, ret = document.createElement('ul'), li;
    for( i in json) {
        li = ret.appendChild(document.createElement('li'));
        li.appendChild(document.createTextNode(i+": "));
        if( typeof json[i] === "object") li.appendChild(json2html(json[i]));
        else li.firstChild.nodeValue += json[i];
    }
    return ret;
}
于 2012-11-12T16:14:30.287 に答える