任意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 相关文章推荐
jquery 实现两级导航菜单附效果图
Mar 07 Javascript
通过js为元素添加多项样式,浏览器全兼容写法
Aug 30 Javascript
jQuery插件zepto.js简单实现tab切换
Jun 16 Javascript
Position属性之relative用法
Dec 14 Javascript
jQuery简单实现中间浮窗效果
Sep 04 Javascript
VUE2.0+Element-UI+Echarts封装的组件实例
Mar 02 Javascript
vue项目中实现的微信分享功能示例
Jan 21 Javascript
解决前后端分离 vue+springboot 跨域 session+cookie失效问题
May 13 Javascript
ES6 Object方法扩展的应用实例分析
Jun 25 Javascript
JS开发自己的类库实例分析
Aug 28 Javascript
layui中select,radio设置不生效的解决方法
Sep 05 Javascript
JavaScript基于SVG的图片切换效果实例代码
Dec 15 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学习教程之第1天
2008/06/15 PHP
javascript将数字转换整数金额大写的方法
2015/01/27 Javascript
js同源策略详解
2015/05/21 Javascript
jQuery实现checkbox全选的方法
2015/06/10 Javascript
JavaScript创建闭包的两种方式的优劣与区别分析
2015/06/22 Javascript
JavaScript实战(原生range和自定义特效)简单实例
2016/08/21 Javascript
JS判断是否为JSON对象及是否存在某字段的方法(推荐)
2016/11/29 Javascript
JavaScript自定义浏览器滚动条兼容IE、 火狐和chrome
2017/01/05 Javascript
纯原生js实现贪吃蛇游戏
2020/04/16 Javascript
JS中cookie的使用及缺点讲解
2017/05/13 Javascript
jQuery制作全屏宽度固定高度轮播图(实例讲解)
2017/07/08 jQuery
提高Node.js性能的应用技巧分享
2017/08/10 Javascript
vue 2.0 购物车小球抛物线的示例代码
2018/02/01 Javascript
swiper 解决动态加载数据滑动失效的问题
2018/02/26 Javascript
vue中实现移动端的scroll滚动方法
2018/03/03 Javascript
Node.js 使用AngularJS的方法示例
2018/05/11 Javascript
深入浅析nuxt.js基于ssh的vue通用框架
2019/05/21 Javascript
[05:43]VG.R战队教练Mikasa专访:为目标从未停止战斗
2016/08/02 DOTA
跟老齐学Python之正规地说一句话
2014/09/28 Python
python简单实现计算过期时间的方法
2015/06/09 Python
Python堆排序原理与实现方法详解
2018/05/11 Python
Python2.7环境Flask框架安装简明教程【已测试】
2018/07/13 Python
python实现的汉诺塔算法示例
2019/10/23 Python
python tornado修改log输出方式
2019/11/18 Python
浅谈JupyterNotebook导出pdf解决中文的问题
2020/04/22 Python
python中Django文件上传方法详解
2020/08/05 Python
如何用python 操作zookeeper
2020/12/28 Python
Python基于爬虫实现全网搜索并下载音乐
2021/02/14 Python
eBay意大利购物网站:eBay.it
2019/09/04 全球购物
华为慧通面试题
2012/09/11 面试题
董事长秘书岗位职责
2015/02/13 职场文书
2015年电气技术员工作总结
2015/07/24 职场文书
2016年暑期社会实践活动总结报告
2016/04/06 职场文书
Mysql中存储引擎的区别及比较
2021/06/04 MySQL
java解析XML详解
2021/07/09 Java/Android
nginx 添加http_stub_status_module模块
2022/05/25 Servers