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. Flink架构分析之资源分配

    Task Slot     Flink中每个真正执行任务的TaskManager都是一个JVM进程,其在多线程环境中执行一个或者多个子任务.为了控制一个JVM同时能运行的任务数量,flink引入了ta ...

  2. PHP has encountered an Access Violation at 01F4A622解决方法

    php搭建的网站出现以下问题的解决方法分享: Z-blog,DedeCMS,Dsicuz!,PhpWind,PhpCMS,帝国CMS等都有可能出现php访问冲突问题. 今天访问网站发现出现了一个错误& ...

  3. NO.4:自学python之路------内置方法、装饰器、迭代器

    引言 是时候开始新的Python学习了,最近要考英语,可能不会周更,但是尽量吧. 正文 内置方法 Python提供给了使用者很多内置方法,可以便于编程使用.这里就来挑选其中大部分的内置方法进行解释其用 ...

  4. Ruby知识点一:方法

    1.实例方法 接收者是对象本身的方法 2.类方法 接收者是类本身的方法,调用类方法时,可以使用::或者.两个符号. 类名.方法名 类名::方法名 3.函数式方法 没有接收者(接收者省略而已)的方法 4 ...

  5. win10浏览器访问vmware中ubuntu开启的某个服务端口出现的问题

    问题描述 1. win10系统中浏览器能正常访问  ubuntu中nginx服务器的80端口, 但是不能访问8082 问题原因 ubuntu 防火墙默认没有启用 8082端口, 需要开启这个端口号 解 ...

  6. 网页调起App之应用实践

    声明:本文由入驻搜狐公众平台的作者撰写,除搜狐官方账号外,观点仅代表作者本人,不代表搜狐立场.举报 新春佳节即将到来,北京的上地&西二旗.望京&国贸.五道口&中关村地区等程序员 ...

  7. java控制台编译通过,运行出现找不到或无法加载主类的情况

    参考链接:http://www.knowsky.com/1046493.html 当建了一个包之后(假设建的包的名字为com),找到该java文件的com目录,发现编译能够通过,但是运行的时候出现了一 ...

  8. 20162328蔡文琛 大二week07

    20162328 2017-2018-1 <程序设计与数据结构>第7周学习总结 教材学习内容总结 树是非线性结构,其元素组织为一个层次结构. 树的度表示树种任意节点的最大子节点数. 有m个 ...

  9. Task 4.3 求环形数组的最大子数组和

    任务要求:输入一个整形数组,数组里有正数也有负数. 数组中连续的一个或多个整数组成一个子数组,每个子数组都有一个和.    如果数组A[0]……A[j-1]首尾相邻,允许A[i-1], …… A[n- ...

  10. 学习率(Learning rate)的理解以及如何调整学习率

    1. 什么是学习率(Learning rate)?   学习率(Learning rate)作为监督学习以及深度学习中重要的超参,其决定着目标函数能否收敛到局部最小值以及何时收敛到最小值.合适的学习率 ...