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)priceiddescription
0303“这是第二个数据”
1151“这是第一个数据”
252“这是第三个数据”

(index)priceiddescription
0151“这是第一个数据”

总结

以上所述是小编给大家介绍的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
  • asp之家 网络编程 m.aspxhome.com