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. CHAPTER 24 History of Our Planet 第24章 我们行星的历史

    CHAPTER 24 History of Our Planet 第24章 我们行星的历史 Uncovering the bones of ancient beasts is only part of ...

  2. Netty源码分析第5章(ByteBuf)---->第4节: PooledByteBufAllocator简述

    Netty源码分析第五章: ByteBuf 第四节: PooledByteBufAllocator简述 上一小节简单介绍了ByteBufAllocator以及其子类UnPooledByteBufAll ...

  3. 【CentOS 7】scp示例

    1,从远端拷贝到本地 /tmp路径 root@raspberrypi:/download/api_weather# scp root@123.207.xxx.xxx:/xxx/* /tmp 2,从本地 ...

  4. LeetCode 303. Range Sum Query - Immutable (C++)

    题目: Given an integer array nums, find the sum of the elements between indices iand j (i ≤ j), inclus ...

  5. (第十周)新NABCD

    项目名:食物链教学工具 组名:奋斗吧兄弟 组长:黄兴 组员:李俞寰.杜桥.栾骄阳.王东涵 新的NABCD模型: Need:可以辅助教师课堂讲授食物链相关的知识.软件的界面要漂亮,操作要简单,要给出软件 ...

  6. BugPhobia开发篇章:Alaph阶段Scurm Meeting

    [github]   https://github.com/bugphobia/XuebaOnline 0x01 :目录与摘要 If you weeped for the missing sunset ...

  7. BugPhobia开发篇章:Scurm Meeting-更新至0x02

    0x01 :目录与摘要 If you weeped for the missing sunset, you would miss all the shining stars 索引 提纲 整理与更新记录 ...

  8. [buaa-SE-2017]个人作业-期末总结

    个人作业-期末总结 Part1: 阅读作业 在这一部分,首先我将说说我对这次阅读作业中每篇文章的理解,最后结合这次团队项目的经理谈谈自己对软件开发的看法. 1. No Silver Bullet 文章 ...

  9. 个人作业-Week 1

    1)快速看完整部教材,列出你仍然不懂的5到10个问题,发布在你的个人博客上. Q1:"Scrum Master不是一个官,而是一个没有行政权力的沟通者,就像微软的PM那样.他/她同时还要在团 ...

  10. 第二阶段Sprint冲刺会议9

    进展:查看有关“共享平台”的资料,看如何实现上传下载功能,并尝试编码,没有成功.