JavaScript对JSON数据进行排序和搜索


Posted in Javascript onJuly 24, 2017

在使用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数据进行排序和搜索,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
JavaScript中令你抓狂的魔术变量
Nov 30 Javascript
jQuery 1.2.x 升? 1.3.x 注意事项
May 06 Javascript
不安全的常用的js写法
Sep 15 Javascript
js函数返回多个返回值的示例代码
Nov 05 Javascript
一个js导致的jquery失效问题的解决方法
Nov 27 Javascript
JavaScript判断表单为空及获取焦点的方法
Feb 12 Javascript
js字符串截取函数slice、substring和substr的比较
May 17 Javascript
Ionic实现页面下拉刷新(ion-refresher)功能代码
Jun 03 Javascript
微信小程序实现导航栏选项卡效果
Jun 19 Javascript
微信小程序 可搜索的地址选择实现详解
Aug 28 Javascript
VSCode 配置uni-app的方法
Jul 11 Javascript
详解Typescript里的This的使用方法
Jan 08 Javascript
Angular中ng-repeat与ul li的多层嵌套重复问题
Jul 24 #Javascript
深入理解React Native原生模块与JS模块通信的几种方式
Jul 24 #Javascript
浅析JavaScript中的平稳退化(graceful degradation)
Jul 24 #Javascript
vue.js移动端app实战1:初始配置详解
Jul 24 #Javascript
React 子组件向父组件传值的方法
Jul 24 #Javascript
浅谈Node.js ORM框架Sequlize之表间关系
Jul 24 #Javascript
vue 实现 tomato timer(蕃茄钟)实例讲解
Jul 24 #Javascript
You might like
PHP操作Redis常用技巧总结
2018/04/24 PHP
thinkPHP框架中layer.js的封装与使用方法示例
2019/01/18 PHP
PHP 7.4 新语法之箭头函数实例详解
2019/05/09 PHP
php连接mysql数据库最简单的实现方法
2019/09/24 PHP
Laravel 连接(Join)示例
2019/10/16 PHP
Laravel 模型使用软删除-左连接查询-表起别名示例
2019/10/24 PHP
一个JS小玩意 几个属性相加不能超过一个特定值.
2009/09/29 Javascript
jQuery源码解读之removeClass()方法分析
2015/02/20 Javascript
JavaScript检测浏览器cookie是否已经启动的方法
2015/02/27 Javascript
Javascript基于对象三大特性(封装性、继承性、多态性)
2016/01/04 Javascript
浅析Bootstrap验证控件的使用
2016/06/23 Javascript
Bootstrap基本组件学习笔记之缩略图(13)
2016/12/08 Javascript
jQuery获取选中单选按钮radio的值
2016/12/27 Javascript
利用nodejs监控文件变化并使用sftp上传到服务器
2017/02/18 NodeJs
Angularjs根据json文件动态生成路由状态的实现方法
2017/04/17 Javascript
Vue键盘事件用法总结
2017/04/18 Javascript
jQuery异步提交表单实例
2017/05/30 jQuery
Vue组件教程之Toast(Vue.extend 方式)详解
2019/01/27 Javascript
解决vue组件没显示,没起作用,没报错,但该显示的组件没显示问题
2020/09/02 Javascript
python清除字符串里非字母字符的方法
2015/07/02 Python
Python简单连接MongoDB数据库的方法
2016/03/15 Python
python用reduce和map把字符串转为数字的方法
2016/12/19 Python
python Paramiko使用示例
2020/09/21 Python
香港时装购物网站:ZALORA香港
2017/04/23 全球购物
达拉斯牛仔官方商店:Dallas Cowboys Pro Shop
2018/02/10 全球购物
Mio Skincare英国官网:身体紧致及孕期身体护理
2018/08/19 全球购物
在线吉他课程,学习如何弹吉他:Fender Play
2019/02/28 全球购物
ASP.NET中的身份验证有那些
2012/07/13 面试题
毕业生找工作推荐信
2013/11/21 职场文书
警校毕业生自我评价
2014/04/06 职场文书
旅游安全协议书
2014/04/21 职场文书
建材投资建议书
2014/05/16 职场文书
秋季运动会演讲稿
2014/09/16 职场文书
机关党员三严三实心得体会
2014/10/13 职场文书
2019年员工旷工保证书!
2019/06/28 职场文书
Golang数据类型和相互转换
2022/04/12 Golang