任意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实例教程(19) 使用HoTMetal(4)
Dec 23 Javascript
jQuery 性能优化指南(3)
May 21 Javascript
Javascript 圆角div的实现代码
Oct 15 Javascript
动态加载图片路径 保持JavaScript控件的相对独立性
Sep 03 Javascript
对xmlHttp对象方法和属性的理解
Jan 17 Javascript
Jqyery中同等与js中windows.onload的应用
May 10 Javascript
js showModalDialog 弹出对话框的简单实例(子窗体)
Jan 07 Javascript
JavaScript移除数组内重复元素的方法
Mar 18 Javascript
jquery ajax双击div可直接修改div中的内容
Mar 04 Javascript
Bootstrap基本插件学习笔记之按钮(21)
Dec 08 Javascript
JavaScript实现跟随滚动缓冲运动广告框
Jul 15 Javascript
JS实现给数组对象排序的方法分析
Jun 24 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学习之 认清变量的作用范围
2010/01/26 PHP
php生成过去100年下拉列表的方法
2015/07/20 PHP
配置eAccelerator和XCache扩展来加速PHP程序的执行
2015/12/22 PHP
老生常谈PHP中的数据结构:DS扩展
2017/07/17 PHP
YII2框架中使用RBAC对模块,控制器,方法的权限控制及规则的使用示例
2020/03/18 PHP
不同浏览器对回车提交表单的处理办法
2010/02/13 Javascript
JQuery操作表格(隔行着色,高亮显示,筛选数据)
2012/02/23 Javascript
jquery图片不完全按比例自动缩小的简单代码
2013/07/29 Javascript
JS代码防止SQL注入的方法(超简单)
2016/04/12 Javascript
angular ngClick阻止冒泡使用默认行为的方法
2016/11/03 Javascript
Bootstrap基本组件学习笔记之面板(14)
2016/12/08 Javascript
JS作用域闭包、预解释和this关键字综合实例解析
2016/12/16 Javascript
iscroll-probe实现下拉刷新和下拉加载效果
2017/06/28 Javascript
Vue实现左右菜单联动实现代码
2018/08/12 Javascript
Vue.js递归组件实现组织架构树和选人功能案例分析
2019/07/03 Javascript
JavaScript在web自动化测试中的作用示例详解
2019/08/25 Javascript
vue 兄弟组件的信息传递的方法实例详解
2019/08/30 Javascript
vue-cli和v-charts实现可视化图表过程解析
2019/10/08 Javascript
python 迭代器和iter()函数详解及实例
2017/03/21 Python
Python提取支付宝和微信支付二维码的示例代码
2019/02/15 Python
Python实现的排列组合、破解密码算法示例
2019/04/12 Python
Python面向对象之私有属性和私有方法应用案例分析
2019/12/31 Python
python ImageDraw类实现几何图形的绘制与文字的绘制
2020/02/26 Python
pandas数据处理之绘图的实现
2020/06/15 Python
python 常用日期处理-- datetime 模块的使用
2020/09/02 Python
python常量折叠基础知识点讲解
2021/02/28 Python
HTML5新特性 多线程(Worker SharedWorker)
2017/04/24 HTML / CSS
英语专业学子个人的自我评价
2013/10/02 职场文书
前厅部经理岗位职责范文
2014/02/04 职场文书
模具专业毕业推荐信
2014/03/08 职场文书
三月学雷锋活动总结
2014/06/26 职场文书
新教师培训心得体会
2014/09/02 职场文书
教师自我剖析材料(群众路线)
2014/09/29 职场文书
初婚未育证明样本
2014/10/24 职场文书
公司开除员工通知
2015/04/22 职场文书
干货:如何写好观后感 !
2019/05/21 职场文书