任意Json轉成無序列表的方法示例

更新時間：2016年12月09日 11:16:01 作者：薛彬

這篇文章主要給大家介紹了任意Json如何轉成無序列表，文中給出了詳細的示例代碼，相信對大家的理解和學習具有一定的參考借鑒價值，有需要的朋友們下面跟著小編來一起學習學習吧。

前言

不知道大家有沒有發(fā)現(xiàn)，在網上很多樹狀插件都是需要固定格式的Json，但自己在生成Json的時候沒考慮這些，所以就只能自己拼接字符串來生成無序列表.

比如：

{
 "頂層菜單1":[
 {
  "domain":"頂層菜單1",
  "runType":"background",
  "moduleName":"子菜單",
  "memo":"描述",
  "srcFile":"",
  "depends":[]
 }
 ],
 "頂層菜單2":[
 {
  "domain":"頂層菜單2",
  "runType":"background",
  "moduleName":"子菜單1",
  "memo":"描述",
  "srcFile":"",
  "depends":[]
 },
 {
  "domain":"頂層菜單2",
  "runType":"background",
  "moduleName":"子菜單2",
  "memo":"描述",
  "srcFile":"",
  "depends":[]
 }
 ],
 "頂層菜單3":[]
}

直接貼代碼吧…

dataObject = JSON.parse(data);
var html = '<ul>';
var domainName;
var moduleName;
for ( var n in dataObject) {
  html += '<li>' + n + '<ul class="listItem">';
  for (var i = 0; i < dataObject[n].length; i++) {
    domainName=dataObject[n][i].domain;
    moduleName=dataObject[n][i].moduleName;
    html += '<a href="#">' + '<li>'+ moduleName + '</li>'+ '</a>';
  }
  html += '</ul></li>';
}
html += '</ul>';
$('#sidebar').append(html);

總結

以上就是這篇文章的全部內容了，希望本文的內容對大家的學習或者工作能帶來一定的幫助，如果有疑問大家可以留言交流。

您可能感興趣的文章:

理解JSON：3分鐘課程
如果你跟我一樣(我擔心你就是)，那么，到目前為止，這應該是你對JSON的經驗
2011-10-10
簡明json介紹
不要認為JSON是種新的應用，其實JSON就是javascript支持的一種對象直接量。
2008-09-09
IE8 原生JSON支持
你可能已經從這篇文章的標題中猜到了，Internet Explorer 8（目前是Beta2）提供了原生JSON的解析和序列化。
2009-04-04
javascript JSON操作入門實例
JSON （JavaScript Object Notation）一種簡單的數(shù)據格式，比xml更輕巧。 JSON 是 JavaScript 原生格式，這意味著在 JavaScript 中處理 JSON 數(shù)據不需要任何特殊的 API 或工具包。
2010-04-04
詳解Java中String JSONObject JSONArray List<實體類>轉換
這篇文章主要介紹了詳解String JSONObject JSONArray List<實體類>轉換，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧
2020-11-11
JSON 數(shù)據格式詳解
JSON(JavaScript Object Notation) 是一種輕量級的數(shù)據交換格式。JSON采用完全獨立于語言的文本格式，這些特性使JSON成為理想的數(shù)據交換語言。易于人閱讀和編寫，同時也易于機器解析和生成
2017-09-09
JSON 客戶端和服務器端的格式轉換
JSON是JavaScript Object Notation的縮寫。JSON是個輕量級的用于服務器端和客戶端交換數(shù)據的數(shù)據格式。它經常會用在ajax應用上,是因為它是基于ajax對象的格式定義出來的。
2009-08-08
js+json用表格實現(xiàn)簡單網站左側導航
閑暇之余，制作一用表格實現(xiàn)的簡單的網站導航條，分享給大家。這里的數(shù)據基于json格式，學習json的朋友可以參考下。
2010-04-04
10分鐘學會js處理json的常用方法
這篇文章主要介紹了10分鐘學會js處理json的常用方法,需要的朋友可以參考下
2020-12-12
JSON.parse()方法轉換對象的示例以及注意事項
這篇文章主要介紹了JSON.parse()方法轉換對象的示例以及注意事項,我們可以使用 JSON.parse() 方法將數(shù)據轉換為 JavaScript 對象,需要的朋友可以參考下
2023-05-05