任意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停止输出代码
Jul 20 Javascript
锋利的jQuery jQuery中的DOM操作
Mar 21 Javascript
jquery offset函数应用实例
Nov 14 Javascript
jquery 快速回到页首的方法
Dec 05 Javascript
js实现身份证号码验证的简单实例
Feb 19 Javascript
JavaScript中eval()函数用法详解
Dec 14 Javascript
原生JS版和jquery版实现checkbox的全选/全不选/点选/行内点选(Mr.Think)
Oct 29 Javascript
用jQuery实现可输入多选下拉组合框实例代码
Jan 18 Javascript
jQuery基于ajax方式实现用户名存在性检查功能示例
Feb 10 Javascript
有关JS中的0,null,undefined,[],{},'''''''',false之间的关系
Feb 14 Javascript
xmlplus组件设计系列之选项卡(Tabbar)(5)
May 03 Javascript
详解多页应用 Webpack4 配置优化与踩坑记录
Oct 16 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
探讨Hessian在PHP中的使用分析
2013/06/13 PHP
PHP使用Mysqli类库实现完美分页效果的方法
2016/04/07 PHP
thinkphp修改配置进入默认首页的方法
2017/02/07 PHP
laravel学习笔记之模型事件的几种用法示例
2017/08/15 PHP
PHPUnit测试私有属性和方法功能示例
2018/06/12 PHP
实例讲解php实现多线程
2019/01/27 PHP
javascript instanceof 与typeof使用说明
2010/01/11 Javascript
js将long日期格式转换为标准日期格式实现思路
2013/04/07 Javascript
javascript中对Date类型的常用操作小结
2016/05/19 Javascript
jQuery中show与hide方法用法示例
2016/09/16 Javascript
JavaScript每天必学之基础知识
2016/09/17 Javascript
vue.js+boostrap项目实践(案例详解)
2016/09/21 Javascript
Vue.js学习示例分享
2017/02/05 Javascript
js仿新浪微博消息发布功能
2017/02/17 Javascript
Bootstrap警告(Alerts)的实现方法
2017/03/22 Javascript
详解HTTPS 的原理和 NodeJS 的实现
2017/07/04 NodeJs
详解angularjs popup-table 弹出框表格指令
2017/09/20 Javascript
使用vue-cli+webpack搭建vue开发环境的方法
2017/12/22 Javascript
vue项目搭建以及全家桶的使用详细教程(小结)
2018/12/19 Javascript
Vue动态修改网页标题的方法及遇到问题
2019/06/09 Javascript
javascript实现贪吃蛇经典游戏
2020/04/10 Javascript
浅析Python的web.py框架中url的设定方法
2016/07/11 Python
基于python中的TCP及UDP(详解)
2017/11/06 Python
python实现n个数中选出m个数的方法
2018/11/13 Python
Pycharm+Scrapy安装并且初始化项目的方法
2019/01/15 Python
Python Opencv实现图像轮廓识别功能
2020/03/23 Python
Python爬虫爬取有道实现翻译功能
2020/11/27 Python
英国口碑最好的的维他命胶囊品牌:Myvitamins(有中文站)
2016/12/03 全球购物
Cotton On南非:澳洲时尚平价品牌
2018/06/28 全球购物
开工典礼策划方案
2014/05/23 职场文书
民用住房租房协议书
2014/10/29 职场文书
幼儿园工作总结2015
2015/04/01 职场文书
导游词之天下银坑景区
2019/11/21 职场文书
Nginx服务器添加Systemd自定义服务过程解析
2021/03/31 Servers
python使用pygame创建精灵Sprite
2021/04/06 Python
golang正则之命名分组方式
2021/04/25 Golang