插入嵌套的JSON數據轉換成HTML下拉

Question

我有一個JSON字符串是這樣的：

{ 
"electronics": { 
    "cameras": [ 
     "sony", 
     "nikon", 
     "canon" 
    ], 
    "TV": "none", 
    "laptop": [ 
     "hp", 
     "apple", 
     "sony" 
    ] 
}, 
"home": { 
    "furniture": [ 
     "table", 
     "chair", 
     "cupboard" 
    ], 
    "couch": "none", 
    "utensils": "none" 
}, 
"books": { 
    "educations": [ 
     "geography", 
     "science" 
    ], 
    "magazines": "none" 
}, 
"kids": { 
    "toys": [ 
     "games", 
     "building toys", 
     "dolls & accessories", 
     "baby & toddler" 
    ], 
    "clothes": "none" 
}, 
"sports": { 
    "outdoor": "none", 
    "exercise": [ 
     "footwear", 
     "clothing", 
     "yogas & DVDs" 
    ] 
}, 
"photos": { 
    "cards & invitations": "none", 
    "canvas wall art": "none", 
    "mugs": "none" 
} 

}

我想顯示使用引導程序列表中的下拉列表。 使用具有硬編碼值的引導程序的HTML代碼如下所示。

<li class="dropdown" style="width:140px;"> 
        <a class= "dropdown-toggle dropdown-menu-hover-color menu-left-color" data-toggle="dropdown" href="#">Electronics </a> 

        <ul class="dropdown-menu" style="position:absolute;float:right;top: 0; left: 140px; "> 
         <li> 
          <a class="dropdown-level1-color menu-left-color" href= "#">Laptop</a> 
          <ul type="none"> 
           <li><a href="#">Apple</a></li> 
           <li><a href="#">Sony</a></li> 
           <li><a href="#">HP</a></li> 
          </ul> 
         </li> 
         <li> 
          <a class="dropdown-level1-color menu-left-color" href= "#">Camera</a> 
          <ul type="none"> 
           <li><a href="#">Canon</a></li> 
           <li><a href="#">Nikon</a></li> 
           <li><a href="#">Sony</a></li> 
          </ul> 
         </li> 
         <li><a class="dropdown-level1-color menu-left-color" href= "#">TV</a></li> 
        </ul> 
       </li> 

我想使用AngularJS將JSON中的值填充到HTML代碼中。 任何實現指針將不勝感激。 在此先感謝。

Answer 1

看看http://json.bloople.net/，該頁面提供了一個在線轉換器JSON - > HTML並提供了鏈接源碼。

順便說一句：任何原因爲什麼「電子」，「家」，..是對象，而不是數組。