任意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 07 Javascript
JavaScript 5 新增 Array 方法实现介绍
Feb 06 Javascript
js页面跳转的常用方法整理
Oct 18 Javascript
jquery实现submit提交表单
Feb 03 Javascript
jQuery插件jRumble实现网页元素抖动
Jun 05 Javascript
JS延时器提示框的应用实例代码解析
Apr 27 Javascript
原生JS实现图片翻书效果
Feb 16 Javascript
AngularJS 中的数据源的循环输出
Oct 12 Javascript
vue通过滚动行为实现从列表到详情,返回列表原位置的方法
Aug 31 Javascript
Vue项目打包编译优化方案
Sep 16 Javascript
JavaScript 常见的继承方式汇总
Sep 17 Javascript
微信小程序实现打卡签到页面
Sep 21 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文件服务实现虚拟挂载其他目录示例
2014/04/17 PHP
Yii 框架使用Forms操作详解
2020/05/18 PHP
效率高的Javscript字符串替换函数的benchmark
2008/08/02 Javascript
JavaScript入门教程(7) History历史对象
2009/01/31 Javascript
Ext javascript建立超链接,进行事件处理的实现方法
2009/03/22 Javascript
JavaScript 序列化对象实现代码
2009/12/18 Javascript
FireFox下XML对象转化成字符串的解决方法
2011/12/09 Javascript
基于Node.js的JavaScript项目构建工具gulp的使用教程
2016/05/20 Javascript
vue.js选中动态绑定的radio的指定项
2017/06/02 Javascript
深入理解vue $refs的基本用法
2017/07/13 Javascript
基于jstree使用AJAX请求获取数据形成树
2017/08/29 Javascript
r.js来合并压缩css文件的示例
2018/04/26 Javascript
快速解决处理后台返回json数据格式的问题
2018/08/07 Javascript
Vue.js获取被选择的option的value和text值方法
2018/08/24 Javascript
微信小程序实现留言板(Storage)
2018/11/02 Javascript
小试小程序云开发(小结)
2019/06/06 Javascript
[01:05:40]2014 DOTA2国际邀请赛中国区预选赛 5 23 CIS VS DT第三场
2014/05/24 DOTA
python将html转成PDF的实现代码(包含中文)
2013/03/04 Python
Python列表(list)常用操作方法小结
2015/02/02 Python
Python os模块学习笔记
2015/06/21 Python
python基础教程之分支、循环简单用法
2016/06/16 Python
python中join()方法介绍
2018/10/11 Python
Python实现繁体中文与简体中文相互转换的方法示例
2018/12/18 Python
python找出一个列表中相同元素的多个索引实例
2019/06/11 Python
python tornado修改log输出方式
2019/11/18 Python
python中Lambda表达式详解
2019/11/20 Python
python matplotlib实现将图例放在图外
2020/04/17 Python
英国高档百货连锁店:John Lewis
2017/11/20 全球购物
英国家用电器购物网站:Hughes
2018/02/23 全球购物
小米官方旗舰店:Xiaomi
2020/08/07 全球购物
酒店中秋节活动方案
2014/01/31 职场文书
财经学院自荐信范文
2014/02/02 职场文书
部队万能检讨书
2014/02/20 职场文书
满月酒主持词
2014/03/27 职场文书
小学生感恩父母演讲稿
2014/08/28 职场文书
项目委托协议书(最新)
2014/09/13 职场文书