任意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的finkyUI插件与Ajax实现页面数据加载功能
Dec 03 Javascript
JQuery动态给table添加、删除行 改进版
Jan 19 Javascript
js获取html页面节点方法(递归方式)
Dec 13 Javascript
微信WeixinJSBridge API使用实例
May 25 Javascript
javascript中setTimeout使用指南
Jul 26 Javascript
深入解析JavaScript的闭包机制
Oct 20 Javascript
JavaScript驾驭网页-CSS与DOM
Mar 24 Javascript
js精准的倒计时函数分享
Jun 29 Javascript
jquery获取点击控件的绝对位置简单实例
Oct 13 Javascript
Vue中的混入的使用(vue mixins)
Jun 01 Javascript
Vue项目中使用better-scroll实现一个轮播图自动播放功能
Dec 03 Javascript
Vue的Options用法说明
Aug 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基础知识:函数基础知识
2006/12/13 PHP
PHP 时间日期操作实战
2011/08/26 PHP
php+html5实现无刷新图片上传教程
2016/01/22 PHP
CodeIgniter框架验证码类库文件与用法示例
2017/03/18 PHP
PHP设计模式之建造者模式定义与用法简单示例
2018/08/13 PHP
YUI 读码日记之 YAHOO.util.Dom - Part.1
2008/03/22 Javascript
JQuery优缺点分析说明
2010/06/09 Javascript
jquery控制左右箭头滚动图片列表的实例
2013/05/20 Javascript
javascript获取web应用根目录的方法
2014/02/12 Javascript
JS控制输入框内字符串长度
2014/05/21 Javascript
纯javascript实现简单下拉刷新功能
2015/03/13 Javascript
js实现跨域的多种方法
2015/12/25 Javascript
学习Node.js模块机制
2016/10/17 Javascript
javascript 中的事件委托详解
2016/10/25 Javascript
AngularJS过滤器filter用法实例分析
2016/11/04 Javascript
javascript构造函数以及原型对象的理解
2017/01/13 Javascript
Web 开发中Ajax的Session 超时处理方法
2017/01/19 Javascript
w3c编程挑战_初级脚本算法实战篇
2017/06/23 Javascript
javascript  数组排序与对象排序的实例
2017/07/17 Javascript
Vue 之孙组件向爷组件通信的实现
2019/04/23 Javascript
jQuery实现消息弹出框效果
2019/12/10 jQuery
Python中的连接符(+、+=)示例详解
2017/01/13 Python
Python一行代码实现快速排序的方法
2019/04/30 Python
Tensorflow--取tensorf指定列的操作方式
2020/06/30 Python
Python解析m3u8拼接下载mp4视频文件的示例代码
2021/03/03 Python
英国最大的自有市场,比亚马逊便宜:Flubit
2019/03/19 全球购物
Ajax和javascript的区别
2013/07/20 面试题
洗发水广告词
2014/03/13 职场文书
团日活动总结
2014/04/28 职场文书
群众路线教育查摆剖析材料
2014/10/10 职场文书
办公室主任岗位职责
2015/01/31 职场文书
向雷锋同志学习倡议书
2015/04/27 职场文书
公司中层管理培训心得体会
2016/01/11 职场文书
小程序教您怎样你零成本推广获取数万用户的方法
2019/07/30 职场文书
win10下go mod配置方式
2021/04/25 Golang
Python爬虫入门案例之回车桌面壁纸网美女图片采集
2021/10/16 Python