任意Json转成无序列表的方法示例


Posted in Javascript onDecember 09, 2016

前言

不知道大家有没有发现,在网上很多树状插件都是需要固定格式的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);

总结

以上就是这篇文章的全部内容了,希望本文的内容对大家的学习或者工作能带来一定的帮助,如果有疑问大家可以留言交流。

Javascript 相关文章推荐
Javascript注入技巧
Jun 22 Javascript
IE6,IE7下js动态加载图片不显示错误
Jul 17 Javascript
js内置对象 学习笔记
Aug 01 Javascript
JavaScript中prototype为对象添加属性的误区介绍
Oct 15 Javascript
基于javascript实现的搜索时自动提示功能
Dec 26 Javascript
12306验证码破解思路分享
Mar 25 Javascript
javascript实现label标签跳出循环操作
Mar 06 Javascript
很棒的一组js图片轮播特效
Jan 12 Javascript
Bootstrap的popover(弹出框)在append后弹不出(失效)
Feb 27 Javascript
微信小程序仿微信运动步数排行(交互)
Jul 13 Javascript
微信小程序实现的3d轮播图效果示例【基于swiper组件】
Dec 11 Javascript
原生js基于canvas实现一个简单的前端截图工具代码实例
Sep 10 Javascript
利用jQuery.Validate异步验证用户名是否存在(推荐)
Dec 09 #Javascript
解析微信JS-SDK配置授权,实现分享接口
Dec 09 #Javascript
利用D3.js实现最简单的柱状图示例代码
Dec 09 #Javascript
适用于手机端的jQuery图片滑块动画
Dec 09 #Javascript
Angular.Js的自动化测试详解
Dec 09 #Javascript
浅析javascript中的Event事件
Dec 09 #Javascript
清除js缓存的多种方法总结
Dec 09 #Javascript
You might like
使用PHP实现Mysql读写分离
2013/06/28 PHP
php中session使用示例
2014/03/29 PHP
PHP简单获取随机数的常用方法小结
2017/06/07 PHP
PHP文件操作实例总结【文件上传、下载、分页】
2018/12/08 PHP
理解Javascript_12_执行模型浅析
2010/10/18 Javascript
HTML5实现留言和回复页面样式
2015/07/22 Javascript
javascript中递归函数用法注意点
2015/07/30 Javascript
JavaScript必知必会(六) delete in instanceof
2016/06/08 Javascript
微信小程序开发之Tabbar实例详解
2017/01/09 Javascript
详解JavaScript中this的指向问题
2017/01/20 Javascript
浅析vue component 组件使用
2017/03/06 Javascript
详解Vue2+Echarts实现多种图表数据可视化Dashboard(附源码)
2017/03/21 Javascript
微信小程序版翻牌小游戏
2018/01/26 Javascript
超出JavaScript安全整数限制的数字计算BigInt详解
2018/06/24 Javascript
使用异步controller与jQuery实现卷帘式分页
2019/06/18 jQuery
微信JS-SDK实现微信会员卡功能(给用户微信卡包里发送会员卡)
2019/07/25 Javascript
[01:11:32]VG vs FNATIC 2019国际邀请赛小组赛 BO2 第二场 8.15
2019/08/17 DOTA
Python深入学习之上下文管理器
2014/08/31 Python
Python创建xml的方法
2015/03/10 Python
python中异常报错处理方法汇总
2016/11/20 Python
Python简单实现控制电脑的方法
2018/01/22 Python
Python实现PS滤镜特效之扇形变换效果示例
2018/01/26 Python
详解Django解决ajax跨域访问问题
2018/08/24 Python
Python3+Pycharm+PyQt5环境搭建步骤图文详解
2019/05/29 Python
python如何解析配置文件并应用到项目中
2019/06/27 Python
使用Python爬虫爬取小红书完完整整的全过程
2021/01/19 Python
LTD Commodities:礼品,独特发现,家居装饰,家用器皿
2017/08/11 全球购物
main 主函数执行完毕后,是否可能会再执行一段代码,给出说明
2012/12/05 面试题
二年级体育教学反思
2014/01/15 职场文书
民族团结演讲稿范文
2014/08/27 职场文书
作风转变心得体会
2014/09/02 职场文书
律师函格式范本
2015/05/27 职场文书
五年级语文教学反思
2016/03/03 职场文书
python基于tkinter制作m3u8视频下载工具
2021/04/24 Python
Python pandas求方差和标准差的方法实例
2021/08/04 Python
SQL写法--行行比较
2021/08/23 SQL Server