JavaScript对JSON数据进行排序和搜索
作者:ma125120 时间:2024-06-09 22:02:57
在使用AJAX获取数据时后台返回的大部分都是json数据,在进行程序开发时有时会需要直接对这些json数据在js程序中再进行一定的操作,如排序、搜索等,而不是通过AJAX请求由数据库进行这些操作。
今天我就教给大家如何使用数组的方法来实现这些操作:
/*假设json就是后台传过来的json数据*/
var test=[
{
price:15,
id:1,
description:'这是第一个数据'
},{
price:30,
id:3,
description:'这是第二个数据'
},{
price:5,
id:2,
description:'这是第三个数据'
}
];
此时可以通过数组的sort方法对json数据进行排序,我们可以将其封装为一个函数,方便操作。
var u=window.u||{};
u.isArray=function(o) {
return typeof o=='object'&&Object.prototype.toString.call(o).slice(8,-1).toLowerCase()=='array';
};
/**
* 对json数据按照一定规则进行排列
* @param {array} array [需要排序的数组]
* @param {string} type [排序时所依据的字段]
* @param {boolean} asc [可选参数,默认降序,设置为true即为升序]
* @return {none} [无返回值]
*/
u.sort=function(array,type,asc) {
if(!u.isArray(array)) throw new Error('第一个参数必须是数组类型');
var asc=asc||false;
array.sort(function(a,b) {
if(!asc) {
return parseFloat(b[type])-parseFloat(a[type]);
} else {
return parseFloat(a[type])-parseFloat(b[type]);
}
});
};
也可以通过数组的filter方法对json数据进行搜索,我们可以将其封装为一个函数,方便操作。
/**
* 对json数组进行搜索
* @param {array} array [需要排序的数组]
* @param {string} type [需要检索的字段]
* @param {string} value [字段中应包含的值]
* @return {array} [包含指定信息的数组]
*/
u.search=function(array,type,value) {
if(!u.isArray(array)) throw new Error('第一个参数必须是数组类型');
var arr=[];
arr=array.filter(function(a) {
return a[type].toString().indexOf(value)!=-1;
});
return arr;
};
可使用下面的方法进行测试:
u.sort(test,'price');
var s=u.search(test,'description',"一");
console.table(test);
console.table(s);
测试结果如下图所示:
(index) | price | id | description |
---|---|---|---|
0 | 30 | 3 | “这是第二个数据” |
1 | 15 | 1 | “这是第一个数据” |
2 | 5 | 2 | “这是第三个数据” |
(index) | price | id | description |
---|---|---|---|
0 | 15 | 1 | “这是第一个数据” |
总结
以上所述是小编给大家介绍的JavaScript对JSON数据进行排序和搜索网站的支持!
来源:http://blog.csdn.net/qq_36662470/article/details/75949169
标签:json,排序,搜索
0
投稿
猜你喜欢
在antd Form表单中select设置初始值操作
2024-05-02 17:03:12
Python获取女友聊天记录详细流程
2022-06-29 21:38:19
python dict 相同key 合并value的实例
2021-06-17 09:07:43
讲解SQL Server2005数据项的分拆与合并
2009-01-04 14:40:00
wxPython实现分隔窗口
2022-11-29 20:45:05
MySQL优化之分区表
2024-01-28 20:42:49
网页设计详细教程之XML简便省力技巧五则
2008-05-23 14:37:00
Python实现的逻辑回归算法示例【附测试csv文件下载】
2023-12-09 21:08:33
python抓取网页中的图片示例
2022-02-24 20:07:22
vue2中基于vue-simple-upload实现文件分片上传组件功能
2024-05-09 15:23:25
python实现按首字母分类查找功能
2023-10-13 11:05:09
Python sorted函数详解(高级篇)
2021-08-14 15:58:28
node.js中的fs.realpathSync方法使用说明
2024-05-13 09:59:04
Python列表元素常见操作简单示例
2022-08-18 08:33:57
composer.lock文件的作用
2023-06-06 13:05:24
python实现图片插入文字
2021-11-02 20:32:09
Python实现多个视频合成一个视频的功能
2021-10-31 12:57:44
d3.js实现简单的网络拓扑图实例代码
2024-05-09 10:19:58
带你熟练掌握Vue3之Pinia状态管理
2024-05-28 15:52:44
python将多个文本文件合并为一个文本的代码(便于搜索)
2021-10-23 07:21:27