任意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优化技巧(文件瘦身篇)
Jan 28 Javascript
jquery操作select详解(取值,设置选中)
Feb 07 Javascript
更快的异步执行(setTimeout多浏览器)
Aug 12 Javascript
基于jQuery实现自动轮播旋转木马特效
Nov 02 Javascript
AngularJS通过$http和服务器通信详解
Sep 21 Javascript
浅谈js对象属性 通过点(.) 和方括号([]) 的不同之处
Oct 29 Javascript
AngulerJS学习之按需动态加载文件
Feb 13 Javascript
JS获取填报扩展单元格控件的值的解决办法
Jul 14 Javascript
Node.js+jade抓取博客所有文章生成静态html文件的实例
Sep 19 Javascript
浅谈Vue数据响应
Nov 05 Javascript
Vue form表单动态添加组件实战案例
Sep 02 Javascript
node使用request请求的方法
Dec 20 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/03/03 PHP
php中serialize序列化与json性能测试的示例分析
2013/04/27 PHP
thinkphp中连接oracle时封装方法无法用的解决办法
2013/06/17 PHP
php实现快速排序的三种方法分享
2014/03/12 PHP
php中引用符号(&amp;)的使用详细介绍
2016/12/06 PHP
PHP实现超简单的SSL加密解密、验证及签名的方法示例
2017/08/28 PHP
用dtree实现树形菜单 dtree使用说明
2011/10/17 Javascript
javascript利用控件对windows的操作实现原理与应用
2012/12/23 Javascript
多个表单中如何获得这个文件上传的网址实现js代码
2013/03/25 Javascript
JS检测输入字符是否包含非法字符的示例代码
2014/02/11 Javascript
JavaScript实现多个重叠层点击切换效果的方法
2015/04/24 Javascript
浅谈node.js中async异步编程
2015/10/22 Javascript
一步步教大家编写酷炫的导航栏js+css实现
2016/03/14 Javascript
Vue.js 2.0 移动端拍照压缩图片上传预览功能
2017/03/06 Javascript
nodejs学习笔记之路由
2017/03/27 NodeJs
vue按需引入element Transfer 穿梭框
2017/09/30 Javascript
解决angularJS中input标签的ng-change事件无效问题
2018/09/13 Javascript
详解js删除数组中的指定元素
2018/10/31 Javascript
vue使用websocket的方法实例分析
2019/06/22 Javascript
VUE+node(express)实现前后端分离
2019/10/13 Javascript
electron踩坑之dialog中的callback解决
2020/10/06 Javascript
Nuxt.js 静态资源和打包的操作
2020/11/06 Javascript
[09:33]2015国际邀请赛第四日TOP10
2015/08/08 DOTA
使用Python编写简单的画图板程序的示例教程
2015/12/08 Python
python执行系统命令后获取返回值的几种方式集合
2018/05/12 Python
Django 表单模型选择框如何使用分组
2019/05/16 Python
Python搭建Spark分布式集群环境
2019/07/05 Python
django的model操作汇整详解
2019/07/26 Python
python文件路径操作方法总结
2020/12/21 Python
学校消防演习方案
2014/02/19 职场文书
运动会广播稿诗歌版
2014/09/12 职场文书
八月一日观后感
2015/06/10 职场文书
酒店开业主持词
2015/07/02 职场文书
党员廉政准则心得体会
2016/01/20 职场文书
解析原生JS getComputedStyle
2021/05/25 Javascript
vue使用echarts实现折线图
2022/03/21 Vue.js