JavaScript遍历JSON或数组集合:

/**
* 根据json数据生成option树形控件
* 如果有children节点则自动生成树形数据
* @param {JSON} data
* @param {int} n 节点深度
* @param {string} char 节点名称前缀
* @returns {string}
* @since 1.0 2014-8-22 by sutroon
* @example
* var data = (typeof (data) == "object") ? data : $.parseJSON(data);
* var str = '';
* str=generate_options(data);
*/
function generate_options(data, n, char) {
if (n == undefined) {
n = 0;
}
if (char == undefined) {
char = '..';
}
var pad = '';
while (n > 0) {
pad += char;
n--;
}
var str = '';
if (data.length) {
// 多行格式
for (var i = 0; i < data.length; i++) {
if (data[i].id) {
// 用于[{"id":"1","name":"name1"}]格式
str += '<option value="' + data[i].id + '">' + pad + (data[i].name ? data[i].name : data[i].text) + '</option>';
} else if (data[i].item) {
// 用于[{"item":"1"},{"item":"2"}]
str += '<option value="' + data[i].item + '">' + pad + data[i].item + '</option>';
} else {
// 用于["item1","item2"]格式
str += '<option value="' + data[i] + '">' + pad + data[i] + '</option>';
}
if (data[i].children) {
str += generate_options(data[i].children, n + 1, char);
}
}
}
else {
// 用于{"a":"a1","b":"b2"}单行格式
for (var attr in data) {
str += '<option value="' + attr + '">' + data[attr] + '</option>';
}
}
return str;
}

jQuery遍历JSON集合:

/**
* Jquery遍历JSON集合
* @param JSON或Array data
* @param integer n
* @param string char
* @returns string
* @since 1.0 <2015-6-11> SoChishun Added.
* @example
alert(generate_options([{"id": "1", "name": "name1"}]));
alert(generate_options([{"item": "1"}, {"item": "2"}]));
alert(generate_options(["item1", "item2"]));
alert(generate_options({"a": "a1", "b": "b2"}));
*/
function generate_options(data, n, char) {
if (n == undefined) {
n = 0;
}
if (char == undefined) {
char = '..';
}
var pad = '';
while (n > 0) {
pad += char;
n--;
}
var str = '';
if ($.isArray(data)) {
// 多行格式
$.each(data, function () {
if (this.id) {
// 用于[{"id":"1","name":"name1"}]格式
str += '<option value="' + this.id + '">' + pad + (this.name ? this.name : this.text) + '</option>';
} else if (this.item) {
// 用于[{"item":"1"},{"item":"2"}]
str += '<option value="' + this.item + '">' + pad + this.item + '</option>';
} else {
// 用于["item1","item2"]格式
str += '<option value="' + this + '">' + pad + this + '</option>';
}
if (this.children) {
str += generate_options(this.children, n + 1, char);
}
})
}
else {
if ($.isPlainObject(data)) {
// 用于{"a":"a1","b":"b2"}单行格式
$.each(data, function (key) {
str += '<option value="' + key + '">' + this + '</option>';
})
}
}
return str;
}

版权声明:本文采用署名-非商业性使用-相同方式共享(CC BY-NC-SA 3.0 CN)国际许可协议进行许可,转载请注明作者及出处。
本文标题:Javascript/jQuery关于JSON或数组集合的几种循环方法
本文链接:http://www.cnblogs.com/sochishun/p/7263562.html
本文作者:SoChishun (邮箱:14507247#qq.com | 博客:http://www.cnblogs.com/sochishun/)
发表日期:2017年7月31日

Javascript/jQuery关于JSON或数组集合的几种循环方法的更多相关文章

  1. Javascript关于JSON集合的几种循环方法

    /** * 根据json数据生成option树形控件 * 如果有children节点则自动生成树形数据 * @param {JSON} data * @param {int} n 节点深度 * @pa ...

  2. JS数组去重的几种常见方法

    JS数组去重的几种常见方法 一.简单的去重方法 // 最简单数组去重法 /* * 新建一新数组,遍历传入数组,值不在新数组就push进该新数组中 * IE8以下不支持数组的indexOf方法 * */ ...

  3. JavaScript监听手机物理返回键的两种解决方法

    JavaScript没有监听物理返回键的API,所以只能使用 popstate 事件监听. 有两个解决办法: 1.返回到指定的页面 pushHistory(); window.addEventList ...

  4. jquery遍历json与数组方法总结

    来自:http://www.php100.com/html/program/jquery/2013/0905/5927.html 先我们来参考each() 方法,each()规定为每个匹配元素规定运行 ...

  5. Javascript教程:js异步模式编程的4种解决方法

    随着人们对网站视觉效果及用户体验的要求越来越高,所以在未来网站的建设中,设计师们开始越来越多的使用了js文件来达到预期的效果,随着js文件的越来越多,令设计师们最头痛的事情也就来了,那就是Javasc ...

  6. java数组中的三种排序方法中的冒泡排序方法

    我记得我大学学java的时候,怎么就是搞不明白这三种排序方法,也一直不会,现在我有发过来学习下这三种方法并记录下来. 首先说说冒泡排序方法:冒泡排序方法就是把数组中的每一个元素进行比较,如果第i个元素 ...

  7. javascript;Jquery;获取JSON对象,无刷新分页,异步加载,异步删除,实例。

    AjaxNewsList: <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> < ...

  8. javascript;Jquery;获取JSON对象,无刷新评论实例。

      <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> < ...

  9. JavaScript 字符串与json对象互转的几种方法

    第一种:浏览器支持的转换方式(Firefox,chrome,opera,safari,ie)等浏览器: JSON.parse(jsonstr); //可以将json字符串转换成json对象 JSON. ...

随机推荐

  1. Linux 磁盘与文件系统(EXT2)简介

    Linux 中,一切(或几乎一切)都是文件. 一.Linux 磁盘分区与文件系统 1.1 磁盘分区 磁盘的分区主要分为主分区和扩展分区 1)主分区:总共最多只能有四个主分区: 2)扩展分区:只能有一个 ...

  2. IDEA 2018 最新激活码 License server

    IDEA 2018 最新激活码 License server 总会有一个属于适合你的!嘻嘻 http://hb5.s.osidea.cc:1017 http://idea.youbbs.org htt ...

  3. Daily Scrum (2015/11/7)

    今晚谢金洛同学的UI工作完成,我们进行了UI和后端的拼接,准备开始规范化地进行系统测试. 成员 今日任务及成果 时间 明日任务 符美潇 1.把之前PM分配的编码任务及其说明准备好发给PM 1h 待定 ...

  4. Task 6.4 冲刺Two之站立会议5

    在完成主界面和聊天窗口的连接之后,今天对聊天界面在以前的基础上添加了很多东西,比如说对于文件传输和文字通信时的表情包的添加以及抖动窗口的设置等等一一系列的功能.我完成的是文字通信这一部分的内容.

  5. 软工实践-Beta 冲刺 (5/7)

    队名:起床一起肝活队 组长博客:博客链接 作业博客:班级博客本次作业的链接 组员情况 组员1(队长):白晨曦 过去两天完成了哪些任务 描述: 1.界面的修改与完善 展示GitHub当日代码/文档签入记 ...

  6. Codeforces Round #341 (Div. 2) E. Wet Shark and Blocks dp+矩阵加速

    题目链接: http://codeforces.com/problemset/problem/621/E E. Wet Shark and Blocks time limit per test2 se ...

  7. javascript修改div大小遮挡页面渲染问题

    页面中引入了其他js文件,浏览器窗口改变,页面没有跟随渲染问题.最后找到原因是因为这个js方法少了最后一行: "right": RightBox_w. window.onresiz ...

  8. CS学习

    作者:匿名用户链接:https://www.zhihu.com/question/27368268/answer/36464143来源:知乎著作权归作者所有.商业转载请联系作者获得授权,非商业转载请注 ...

  9. servlet跳转问题

    <!-- 相对路径访问 第一个/表示服务器的根目录--> <a href="servlet/o1">访问01/src/servlet/01.java< ...

  10. Js 中的原始值和引用值

    最近遇写 node.js 时到一个问题,把对象当赋值给数组成员时总是出错,比如下面的代码, var Arr = new Array(); var Obj = new Object(); for(var ...