任意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 相关文章推荐
jquer之ajaxQueue简单实现代码
Sep 15 Javascript
JavaScript动态修改背景颜色的方法
Apr 16 Javascript
JQuery+CSS实现图片上放置按钮的方法
May 29 Javascript
详细解读AngularJS中的表单验证编程
Jun 19 Javascript
详解JavaScript的AngularJS框架中的表达式与指令
Mar 05 Javascript
自动适应iframe右边的高度
Dec 22 Javascript
JavaScript Uploadify文件上传实例
Feb 28 Javascript
react中的ajax封装实例详解
Oct 17 Javascript
详解vue配置后台接口方式
Mar 29 Javascript
微信小程序云开发 搭建一个管理小程序
May 17 Javascript
微信小程序可滑动月日历组件使用详解
Oct 21 Javascript
three.js 制作动态二维码的示例代码
Jul 31 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导入大量数据到mysql性能优化技巧
2014/12/29 PHP
php 使用array函数实现分页
2015/02/13 PHP
PHP中把对象转换为关联数组代码分享
2015/04/09 PHP
Laravel执行migrate命令提示:No such file or directory的解决方法
2016/03/16 PHP
Laravel框架集合用法实例浅析
2020/05/14 PHP
JavaScript对象链式操作代码(jquery)
2010/07/04 Javascript
formStorage 基于jquery的一个插件(存储表单中元素的状态到本地)
2012/01/20 Javascript
利用javascript实现web页面中指定区域打印
2013/10/30 Javascript
JS实现定时页面弹出类似QQ新闻的提示框
2013/11/07 Javascript
jQuery实现异步获取json数据的2种方式
2014/08/29 Javascript
基于zepto的移动端轻量级日期插件--date_picker
2016/03/04 Javascript
seajs学习教程之基础篇
2016/10/20 Javascript
如何用js判断dom是否有存在某class的值
2017/02/13 Javascript
jQuery插件zTree实现获取一级节点数据的方法
2017/03/08 Javascript
微信小程序实现瀑布流布局与无限加载的方法详解
2017/05/12 Javascript
jQuery动画_动力节点节点Java学院整理
2017/07/04 jQuery
深入理解Vuex 模块化(module)
2017/09/26 Javascript
AngularJS对动态增加的DOM实现ng-keyup事件示例
2018/03/12 Javascript
vue todo-list组件发布到npm上的方法
2018/04/04 Javascript
JS集合set类的实现与使用方法示例
2019/02/01 Javascript
解决axios post 后端无法接收数据的问题
2019/10/29 Javascript
JavaScript forEach中return失效问题解决方案
2020/06/01 Javascript
jQuery+Ajax+js实现请求json格式数据并渲染到html页面操作示例
2020/06/02 jQuery
JavaScript构造函数原理及实现流程解析
2020/11/19 Javascript
python输出数组中指定元素的所有索引示例
2019/12/06 Python
使用Python+selenium实现第一个自动化测试脚本
2020/03/17 Python
html5 乒乓球(碰撞检测)实例二
2013/07/25 HTML / CSS
使用HTML5做的导航条详细步骤
2020/10/19 HTML / CSS
Shopee马来西亚:随拍即卖,最佳行动电商拍卖平台
2017/06/05 全球购物
国际商务系学生个人的自我评价
2013/11/26 职场文书
医学专业大学生职业生涯规划书
2014/10/25 职场文书
2014年幼师工作总结
2014/11/22 职场文书
2015年大学宣传部工作总结
2015/05/26 职场文书
初中开学典礼新闻稿
2015/07/17 职场文书
初一年级组工作总结
2015/08/12 职场文书
大学生学习十八届五中全会精神心得体会
2016/01/05 职场文书