ネストされたJSONをJavascriptでHTMLネストされたリストに変換する

JSON（XMLとは対照的に）を使用するのはかなり新しく、現在のところJavascriptだけで返されたJSONデータをダイジェスト、解析、表示する作業をしています。ネストされたJSONをJavascriptでHTMLネストされたリストに変換する

{ 
    "node":{ 
    "class":"folder", 
    "title":"Test Framework", 
    "node":{ 
     "class":"folder", 
     "title":"Item 1", 
     "node":{ 
     "class":"folder", 
     "title":"Item 1.1", 
     "node":{ 
      "class":"file", 
      "title":"Item 1.1.a" 
     } 
     }, 
     "node":{ 
     "class":"folder", 
     "title":"Item 1.2", 
     "node":{ 
      "class":"file", 
      "title":"Item 1.2.a" 
     }, 
     "node":{ 
      "class":"file", 
      "title":"Item 1.2.b" 
     }, 
     "node":{ 
      "class":"file", 
      "title":"Item 1.2.c" 
     } 
     }, 
     "node":{ 
     "class":"folder", 
     "title":"Item 1.3", 
     "node":{ 
      "class":"folder", 
      "title":"Item 1.3.a", 
      "node":{ 
      "class":"file", 
      "title":"Item 1.3.a.i" 
      }, 
      "node":{ 
      "class":"file", 
      "title":"Item 1.3.a.ii" 
      } 
     } 
     } 
    }, 
    "node":{ 
     "class":"folder", 
     "title":"Item 2", 
     "node":{ 
     "class":"file", 
     "title":"item 2.a" 
     }, 
     "node":{ 
     "class":"file", 
     "title":"Item 2.b" 
     } 
    } 
    } 
}

誰にその多くを有効にする簡単な方法のための任意のポインタを持っています：私はJSON2.jsライブラリを使用していますし、かなり単純なネストされたリストを表すいくつかの有効なJSONデータをバック取得しています

すべての入れ子要素を持つUL？ JSONにある「class」要素を各LIのクラスとして使用できる場合は、クールです。

ご迷惑をおかけして申し訳ありません。

ありがとう、

Dave

出典

2009-07-31 Dave Waller

FWIW：あなたのJSONに問題があると思います。同じオブジェクトに複数の「ノード」キーがある場所はいくつかあります。 –

jsonはあなたの仕事には適していません。いくつかのオブジェクトは、同じ名前（ "ノード"）を持ついくつかのプロパティを持っているので、互いにオーバーライドしています。代わりにノードの配列を使用する必要があります。

<!DOCTYPE HTML PUBLIC"-//W3C//DTD HTML 4.01//EN" 
    "http://www.w3.org/TR/html4/strict.dtd"> 
<html> 
<head> 
<title></title> 
<script type="text/javascript"> 
function parseNodes(nodes) { // takes a nodes array and turns it into a <ol> 
    var ol = document.createElement("OL"); 
    for(var i=0; i<nodes.length; i++) { 
     ol.appendChild(parseNode(nodes[i])); 
    } 
    return ol; 
} 

function parseNode(node) { // takes a node object and turns it into a <li> 
    var li = document.createElement("LI"); 
    li.innerHTML = node.title; 
    li.className = node.class; 
    if(node.nodes) li.appendChild(parseNodes(node.nodes)); 
    return li; 
} 

window.jsonData = [{ 
    "class": "folder", 
    "title": "Test Framework", 
    "nodes": [{ 
     "class": "folder", 
     "title": "Item 1", 
     "nodes": [{ 
      "class": "folder", 
      "title": "Item 1.1", 
      "nodes": [{ 
       "class": "file", 
       "title": "Item 1.1.a" 
      }] 
     }, 
     { 
      "class": "folder", 
      "title": "Item 1.2", 
      "nodes": [{ 
       "class": "file", 
       "title": "Item 1.2.a" 
      }, 
      { 
       "class": "file", 
       "title": "Item 1.2.b" 
      }, 
      { 
       "class": "file", 
       "title": "Item 1.2.c" 
      }] 
     }, 
     { 
      "class": "folder", 
      "title": "Item 1.3", 
      "nodes": [{ 
       "class": "folder", 
       "title": "Item 1.3.a", 
       "nodes": [{ 
        "class": "file", 
        "title": "Item 1.3.a.i" 
       }, 
       { 
        "class": "file", 
        "title": "Item 1.3.a.ii" 
       }] 
      }] 
     }] 
    }, 
    { 
     "class": "folder", 
     "title": "Item 2", 
     "nodes": [{ 
      "class": "file", 
      "title": "item 2.a" 
     }, 
     { 
      "class": "file", 
      "title": "Item 2.b" 
     }] 
    }] 
}]; 

</script> 
</head> 
<body> 
    <input type="button" 
    onclick="document.body.appendChild(parseNodes(jsonData))" 
    value="go" /> 
</body> 
</html>

そして私はアイテムの番号付けは、ノードのタイトルと一致するには、このCSSを追加することができます:)

<style type="text/css"> 
ol { list-style-type: none } 
ol ol { list-style-type: decimal } 
ol ol ol { list-style-type: decimal } 
ol ol ol ol { list-style-type: lower-alpha } 
ol ol ol ol ol { list-style-type: lower-roman } 
</style>

See it in action.：ここで働いてデータ構造とネストされたリストにそれを回すことができる機能があります

出典

2009-07-31 10:38:00 Alsciende

自分でjson構造を歩き回り、必要に応じて適切な<li>を作成できますが、コンポジットパターンを実装することをおすすめします。詳細はlinkを参照してください。

出典

2009-07-31 10:27:42

各オブジェクトに対して<ul>要素を作成し、各部分に<li>要素を作成する、かなり簡単なコードです。特殊ケースを追加する場合は、"class"などの変数に対してchild変数をテストするためのクイックチェックを追加できます。

function jsonToHtmlList(json) { 
    return objToHtmlList(JSON.parse(json)); 
} 

function objToHtmlList(obj) { 
    if (obj instanceof Array) { 
     var ol = document.createElement('ol'); 
     for (var child in obj) { 
      var li = document.createElement('li'); 
      li.appendChild(objToHtmlList(obj[child])); 
      ol.appendChild(li); 
     } 
     return ol; 
    } 
    else if (obj instanceof Object && !(obj instanceof String)) { 
     var ul = document.createElement('ul'); 
     for (var child in obj) { 
      var li = document.createElement('li'); 
      li.appendChild(document.createTextNode(child + ": ")); 
      li.appendChild(objToHtmlList(obj[child])); 
      ul.appendChild(li); 
     } 
     return ul; 
    } 
    else { 
     return document.createTextNode(obj); 
    } 
}

JSONが意味をなさないため、これはあなたが望むものと正確に一致しません。 JavaScript内のオブジェクト（JSON）はマップなので、同じ名前の子を複数持つことはできません。 Cédricが指摘するように、複数の「ノード」を配列に変換する必要があります。

出典

2009-07-31 10:43:34

ネストされたJSONをJavascriptでHTMLネストされたリストに変換する

答えて

関連する問題