任意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分页代码(简洁实用)
Nov 05 Javascript
ff下JQuery无法监听input的keyup事件的解决方法
Dec 12 Javascript
JavaScript判断字符长度、数字、Email、电话等常用判断函数分享
Apr 01 Javascript
JavaScript数组合并的多种方法
May 22 Javascript
JS模仿腾讯图片站的图片翻页按钮效果完整实例
Jun 21 Javascript
JavaScript lodash常见用法系列小结
Aug 24 Javascript
jQuery编写设置和获取颜色的插件
Jan 09 Javascript
利用Javascript裁剪图片并存储的简单实现
Mar 13 Javascript
AngularJs 常用的过滤器
May 15 Javascript
微信小程序实现动态列表项的顺序加载动画
Jul 25 Javascript
node.js使用mongoose操作数据库实现购物车的增、删、改、查功能示例
Dec 23 Javascript
Vue如何基于vue-i18n实现多国语言兼容
Jul 17 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/08/05 PHP
PHP JSON格式数据交互实例代码详解
2011/01/13 PHP
让PHP更快的提供文件下载的代码
2012/06/13 PHP
PHP遍历目录函数opendir()、readdir()、closedir()、rewinddir()总结
2014/11/18 PHP
PHP中iconv函数转码时截断字符问题的解决方法
2015/01/21 PHP
基于php的CMS中展示文章类实例分析
2015/06/18 PHP
javascript的对话框详解与参数
2007/03/08 Javascript
用Javascript同时提交多个Web表单的方法
2009/12/26 Javascript
基于jquery实现等比缩放图片
2014/12/03 Javascript
jquery插件bxslider用法实例分析
2015/04/16 Javascript
javascript检测两个数组是否相似
2015/05/19 Javascript
删除javascript所创建子节点的方法
2015/05/21 Javascript
jQuery实现点击小图显示大图代码分享
2015/08/25 Javascript
理解Javascript图片预加载
2016/02/23 Javascript
带你快速理解javascript中的事件模型
2017/08/14 Javascript
js实时监控文本框输入字数的实例代码
2018/01/18 Javascript
微信小程序如何播放腾讯视频的实现
2019/09/20 Javascript
Vue.js实现立体计算器
2020/02/22 Javascript
Sublime Text3 配置 NodeJs 环境的方法
2020/05/20 NodeJs
解决Vue-cli3没有vue.config.js文件夹及配置vue项目域名的问题
2020/12/04 Vue.js
[01:20]2018DOTA2亚洲邀请赛总决赛战队Mineski晋级之路
2018/04/07 DOTA
浅谈Python数据类型之间的转换
2016/06/08 Python
Python入门之三角函数tan()函数实例详解
2017/11/08 Python
python登录并爬取淘宝信息代码示例
2017/12/09 Python
Django配置MySQL数据库的完整步骤
2019/09/07 Python
Windows10下Tensorflow2.0 安装及环境配置教程(图文)
2019/11/21 Python
pycharm部署、配置anaconda环境的教程
2020/03/24 Python
详解pycharm的python包opencv(cv2)无代码提示问题的解决
2021/01/29 Python
StubHub德国:购买和出售门票
2017/09/06 全球购物
Keds加拿大官网:购买帆布运动鞋和皮鞋
2019/09/26 全球购物
VLAN和VPN有什么区别?分别实现在OSI的第几层?
2014/12/23 面试题
校运会入场式解说词
2014/02/10 职场文书
护士节活动总结
2014/08/29 职场文书
家长会开场白和结束语
2015/05/29 职场文书
2016年妇联“6﹒26国际禁毒日”宣传活动总结
2016/04/05 职场文书
2019中秋节祝福语大全,提前收藏啦
2019/09/10 职场文书