任意Json轉(zhuǎn)成無序列表的方法示例
更新時間:2016年12月09日 11:16:01 作者:薛彬
這篇文章主要給大家介紹了任意Json如何轉(zhuǎn)成無序列表,文中給出了詳細(xì)的示例代碼,相信對大家的理解和學(xué)習(xí)具有一定的參考借鑒價值,有需要的朋友們下面跟著小編來一起學(xué)習(xí)學(xué)習(xí)吧。
前言
不知道大家有沒有發(fā)現(xiàn),在網(wǎng)上很多樹狀插件都是需要固定格式的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);
總結(jié)
以上就是這篇文章的全部內(nèi)容了,希望本文的內(nèi)容對大家的學(xué)習(xí)或者工作能帶來一定的幫助,如果有疑問大家可以留言交流。
您可能感興趣的文章:
- Vue.js Ajax動態(tài)參數(shù)與列表顯示實現(xiàn)方法
- Vuejs第一篇之入門教程詳解(單向綁定、雙向綁定、列表渲染、響應(yīng)函數(shù))
- AngularJS實現(xiàn)數(shù)據(jù)列表的增加、刪除和上移下移等功能實例
- 將List對象列表轉(zhuǎn)換成JSON格式的類實現(xiàn)方法
- VUEJS實戰(zhàn)之構(gòu)建基礎(chǔ)并渲染出列表(1)
- 基于BootStrap Metronic開發(fā)框架經(jīng)驗小結(jié)【二】列表分頁處理和插件JSTree的使用
- javascript實現(xiàn)列表切換效果
- JSON的String字符串與Java的List列表對象的相互轉(zhuǎn)換
- jsp頁面 列表 展示 ajax異步實現(xiàn)方法
- JS動態(tài)的把左邊列表添加到右邊的實現(xiàn)代碼(可上下移動)
- 利用js來實現(xiàn)縮略語列表、文獻(xiàn)來源鏈接和快捷鍵列表
相關(guān)文章
利用NodeJS的子進(jìn)程(child_process)調(diào)用系統(tǒng)命令的方法分享
child_process即子進(jìn)程可以創(chuàng)建一個系統(tǒng)子進(jìn)程并執(zhí)行shell命令,在與系統(tǒng)層面的交互上挺有用處2013-06-06深入淺析同源與跨域,jsonp(函數(shù)封裝),CORS原理
這篇文章主要介紹了同源與跨域,jsonp(函數(shù)封裝),CORS原理,從同源政策中Ajax限制,到跨域問題以及跨域問題的解決方法幫大家更加深入的去了解其中原理2021-08-08JS中JSON.parse(JSON.stringify())實現(xiàn)深拷貝
深拷貝就是完全拷貝一份新的對象,本文主要介紹了JS中JSON.parse(JSON.stringify())實現(xiàn)深拷貝,文中通過示例代碼介紹的非常詳細(xì),對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值,需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2023-08-08