任意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 相关文章推荐
JS加ASP二级域名转向的代码
May 17 Javascript
JQUERY 浏览器判断实现函数
Aug 20 Javascript
用Juery网页选项卡实现代码
Jun 13 Javascript
jQuery实现淡入淡出的模态框
Feb 09 Javascript
Vue2.x中的父组件传递数据至子组件的方法
May 01 Javascript
让你彻底掌握es6 Promise的八段代码
Jul 26 Javascript
vue watch监听对象及对应值的变化详解
Feb 24 Javascript
React Form组件的实现封装杂谈
May 07 Javascript
JavaScript数组去重的几种方法
Apr 07 Javascript
vue单页应用的内存泄露定位和修复问题小结
Aug 02 Javascript
js遍历详解(forEach, map, for, for...in, for...of)
Aug 28 Javascript
jQuery实现影院选座订座效果
Apr 13 jQuery
利用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
10 个经典PHP函数
2013/10/17 PHP
简单的php缓存类分享     php缓存机制
2014/01/22 PHP
PHP5.5在windows安装使用memcached服务端的方法
2014/04/16 PHP
php如何把表单内容提交到数据库
2019/07/08 PHP
javascript之querySelector和querySelectorAll使用介绍
2011/12/20 Javascript
js中把JSON字符串转换成JSON对象最好的方法
2014/03/21 Javascript
js图片滚动效果时间可随意设定当鼠标移上去时停止
2014/06/26 Javascript
JavaScript实现的使用键盘控制人物走动实例
2014/08/27 Javascript
了不起的node.js读书笔记之例程分析
2014/12/22 Javascript
javascript模拟评分控件实现方法
2015/05/13 Javascript
用JavaScript实现页面重定向功能的教程
2015/06/04 Javascript
JS实现仿Windows经典风格的选项卡Tab切换代码
2015/10/20 Javascript
微信小程序 Page()函数详解
2016/10/17 Javascript
JavaScript基于自定义函数判断变量类型的实现方法
2016/11/23 Javascript
node.js的exports、module.exports与ES6的export、export default深入详解
2017/10/26 Javascript
Vue实现todolist删除功能
2018/06/26 Javascript
解决vue中使用Axios调用接口时出现的ie数据处理问题
2018/08/13 Javascript
Node.js+ELK日志规范的实现
2019/05/23 Javascript
js实现图片粘贴到网页
2019/12/06 Javascript
[03:59]DOTA2英雄梦之声_第07期_水晶室女
2014/06/23 DOTA
python中偏函数partial用法实例分析
2015/07/08 Python
使用Python操作excel文件的实例代码
2017/10/15 Python
Python实现列表删除重复元素的三种常用方法分析
2017/11/24 Python
python科学计算之scipy——optimize用法
2019/11/25 Python
HTML5之SVG 2D入门9—蒙板及mask元素介绍与应用
2013/01/30 HTML / CSS
中国跨境电商:Tomtop
2017/03/16 全球购物
乌克兰品牌化妆品和香水在线商店:Bomond
2020/01/14 全球购物
HR喜欢的自荐信格式
2013/10/08 职场文书
《夸父追日》教学反思
2014/02/26 职场文书
老兵退伍标语
2014/10/07 职场文书
人力资源部岗位职责
2015/02/11 职场文书
家长反馈意见及建议
2015/06/03 职场文书
培训班开班主持词
2015/07/02 职场文书
Pandas数据结构之Series的使用
2022/03/31 Python
Tomcat执行startup.bat出现闪退的原因及解决办法
2022/04/20 Servers
MySQL的prepare使用以及遇到的bug
2022/05/11 MySQL