任意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 相关文章推荐
匹配任意字符的正则表达式写法
Apr 29 Javascript
jquery $(this).attr $(this).val方法使用介绍
Oct 08 Javascript
jquery 按键盘上的enter事件
May 11 Javascript
javascript数组对象常用api函数小结(连接,插入,删除,反转,排序等)
Sep 20 Javascript
初识 Vue.js 中的 *.Vue文件
Nov 22 Javascript
浅谈Node.js爬虫之网页请求模块
Jan 11 Javascript
vue webpack开发访问后台接口全局配置的方法
Sep 18 Javascript
在vue项目中使用Jquery-contextmenu插件的步骤讲解
Jan 27 jQuery
从理论角度讨论JavaScript闭包
Apr 03 Javascript
VUE DEMO之模拟登录个人中心页面之间数据传值实例
Oct 31 Javascript
vue-resource:jsonp请求百度搜索的接口示例
Nov 09 Javascript
JavaScript实现串行请求的示例代码
Sep 14 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设置session值和cookies的学习示例
2014/03/21 PHP
PHP实现的随机红包算法示例
2017/08/14 PHP
PHP使用JpGraph绘制折线图操作示例【附源码下载】
2019/10/18 PHP
关于JavaScript中string 的replace
2013/04/12 Javascript
关闭ie窗口清除Session的解决方法
2014/01/10 Javascript
用Jquery.load载入页面实现局部刷新
2014/01/22 Javascript
Javascript连接Access数据库完整实例
2015/08/03 Javascript
AngularJS实现给动态生成的元素绑定事件的方法
2016/12/14 Javascript
JQuery获取鼠标进入和离开容器的方向
2016/12/29 Javascript
Vuejs入门教程之Vue生命周期,数据,手动挂载,指令,过滤器
2017/04/19 Javascript
详解Node.js串行化流程控制
2017/05/04 Javascript
用vue的双向绑定简单实现一个todo-list的示例代码
2017/08/03 Javascript
微信小程序实现流程进度的图样式功能
2018/01/16 Javascript
vuex的简单使用教程
2018/02/02 Javascript
Redux实现组合计数器的示例代码
2018/07/04 Javascript
webpack打包nodejs项目的方法
2018/09/26 NodeJs
新年快乐! javascript实现超级炫酷的3D烟花特效
2019/01/30 Javascript
在SSM框架下用laypage和ajax实现分页和数据交互的方法
2019/09/27 Javascript
vue项目中使用particles实现粒子背景效果及遇到的坑(按钮没有点击响应)
2020/02/11 Javascript
vue实现防抖的实例代码
2021/01/11 Vue.js
使用Python装饰器在Django框架下去除冗余代码的教程
2015/04/16 Python
Python 使用requests模块发送GET和POST请求的实现代码
2016/09/21 Python
JPype实现在python中调用JAVA的实例
2017/07/19 Python
python xlsxwriter库生成图表的应用示例
2018/03/16 Python
在windows下使用python进行串口通讯的方法
2019/07/02 Python
Python 利用Entrez库筛选下载PubMed文献摘要的示例
2020/11/24 Python
阿根廷票务网站:StubHub阿根廷
2018/04/13 全球购物
西班牙著名的珠宝首饰品牌:P D PAOLA
2018/09/15 全球购物
双十佳事迹材料
2014/01/29 职场文书
公务员政审个人鉴定
2014/02/25 职场文书
投标人法定代表人授权委托书格式
2014/09/28 职场文书
2014年学校工会工作总结
2014/12/06 职场文书
新闻稿件写作技巧
2015/07/18 职场文书
2015年党风廉政建设个人总结
2015/08/18 职场文书
MySQL REVOKE实现删除用户权限
2021/06/18 MySQL
create-react-app开发常用配置教程
2022/06/25 Javascript