任意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源码分析-05异步队列 Deferred 使用介绍
Nov 14 Javascript
javascript引擎长时间独占线程造成卡顿的解决方案
Dec 03 Javascript
函数window.open实现关闭所有的子窗口
Aug 03 Javascript
jQuery hover事件简单实现同时绑定2个方法
Jun 07 Javascript
angularjs过滤器--filter与ng-repeat配合有奇效
Apr 20 Javascript
vue.js 左侧二级菜单显示与隐藏切换的实例代码
May 23 Javascript
vue通过滚动行为实现从列表到详情,返回列表原位置的方法
Aug 31 Javascript
vue中当图片地址无效的时候,显示默认图片的方法
Sep 18 Javascript
Node.js+ELK日志规范的实现
May 23 Javascript
js+HTML5 canvas 实现简单的加载条(进度条)功能示例
Jul 16 Javascript
Vue 使用typescript如何优雅的调用swagger API
Sep 01 Javascript
vue实现轮播图帧率播放
Jan 26 Vue.js
利用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
消息持续发送的完整例子
2006/10/09 PHP
浅析php插件 HTMLPurifier HTML解析器
2013/07/01 PHP
thinkphp模板的包含与渲染实例分析
2014/11/26 PHP
PHP中Closure类的使用方法及详解
2015/10/09 PHP
PHP二维数组矩形转置实例
2016/07/20 PHP
PHP编写简单的App接口
2016/08/28 PHP
PHP延迟静态绑定的深入讲解
2018/04/02 PHP
音乐播放用的的几个函数
2006/09/07 Javascript
jquery.cookie.js 操作cookie实现记住密码功能的实现代码
2011/04/27 Javascript
node爬取微博的数据的简单封装库nodeweibo使用指南
2015/01/02 Javascript
jQuery实现渐变弹出层和弹出菜单的方法
2015/02/20 Javascript
DWR3 访问WEB元素的两种方法实例详解
2017/01/03 Javascript
Javascript调试之console对象——你不知道的一些小技巧
2017/07/10 Javascript
解决ionic和angular上拉加载的问题
2017/08/03 Javascript
如何重置vue打印变量的显示方式
2017/12/06 Javascript
JavaScript实现shuffle数组洗牌操作示例
2019/01/03 Javascript
详解JS判断页面是在手机端还是在PC端打开的方法
2019/04/26 Javascript
Javascript实现贪吃蛇小游戏(含详细注释)
2020/10/23 Javascript
[04:19]DOTA2完美大师赛第四天精彩集锦
2017/11/26 DOTA
python使用锁访问共享变量实例解析
2018/02/08 Python
Python全面分析系统的时域特性和频率域特性
2020/02/26 Python
Python的3种运行方式:命令行窗口、Python解释器、IDLE的实现
2020/10/10 Python
selenium如何定位span元素的实现
2021/01/13 Python
HTML5 progress和meter控件_动力节点Java学院整理
2017/07/06 HTML / CSS
L’AGENCE官网:加州女装品牌
2018/06/03 全球购物
安德玛比利时官网:Under Armour比利时
2019/08/28 全球购物
英国家居用品和床上用品零售商:P&B Home
2020/01/16 全球购物
eHarmony英国:全球领先的认真恋爱约会平台之一
2020/11/16 全球购物
销售工作岗位职责
2013/12/24 职场文书
房地产财务部员工岗位职责
2014/03/12 职场文书
大学生全国两会报告感想
2014/03/17 职场文书
村党支部对照检查材料思想汇报
2014/09/28 职场文书
Python基础之数据类型知识汇总
2021/05/18 Python
最新最全的手机号验证正则表达式
2022/02/24 Javascript
html中相对位置与绝对位置的具体使用
2022/05/15 HTML / CSS
MySQL数据库简介与基本操作
2022/05/30 MySQL