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