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 相关文章推荐
jquery 3D球状导航的文章分类
Jul 06 Javascript
页面回到顶部的三种实现(锚标记,js)
Oct 01 Javascript
javascript全局变量封装模块实现代码
Nov 28 Javascript
js修改input的type属性及浏览器兼容问题探讨与解决
Jan 23 Javascript
jQuery中:eq()选择器用法实例
Dec 29 Javascript
jQuery中:empty选择器用法实例
Dec 30 Javascript
Jquery简单实现GridView行高亮的方法
Jun 15 Javascript
jQuery实例—选项卡的简单实现(js源码和jQuery)
Jun 14 Javascript
AngularJs 终极购物车(实例讲解)
Nov 08 Javascript
vue element中axios下载文件(后端Python)
May 10 Javascript
浅谈Vuex注入Vue生命周期的过程
May 20 Javascript
如何配置vue.config.js 处理static文件夹下的静态文件
Jun 19 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开发文件系统实例讲解
2006/10/09 PHP
非常好用的两个PHP函数 serialize()和unserialize()
2012/02/04 PHP
深入解析yii权限分级式访问控制的实现(非RBAC法)
2013/06/13 PHP
php计算函数执行时间的方法
2015/03/20 PHP
ThinkPHP5.1表单令牌Token失效问题的解决
2019/03/22 PHP
IE中jscript/javascript的条件编译
2006/09/07 Javascript
静态的动态续篇之来点XML
2006/12/23 Javascript
关于 byval 与 byref 的区别分析总结
2007/10/08 Javascript
深入理解JavaScript系列(7) S.O.L.I.D五大原则之开闭原则OCP
2012/01/15 Javascript
jquery 中多条件选择器,相对选择器,层次选择器的区别
2012/07/03 Javascript
Spring MVC中Ajax实现二级联动的简单实例
2016/07/06 Javascript
jQuery页面弹出框实现文件上传
2017/02/09 Javascript
javascript+html5+css3自定义提示窗口
2017/06/21 Javascript
在Mac下彻底卸载node和npm的方法
2018/05/16 Javascript
使用webpack3.0配置webpack-dev-server教程
2018/05/29 Javascript
Express结合Webpack的全栈自动刷新
2019/05/23 Javascript
弱类型语言javascript中 a,b 的运算实例小结
2019/08/07 Javascript
Vue中跨域及打包部署到nginx跨域设置方法
2019/08/26 Javascript
vue实现计步器功能
2019/11/01 Javascript
[00:32]2018DOTA2亚洲邀请赛Secret出场
2018/04/03 DOTA
Python用sndhdr模块识别音频格式详解
2018/01/11 Python
Python if语句知识点用法总结
2018/06/10 Python
python 定时任务去检测服务器端口是否通的实例
2019/01/26 Python
使用python批量转换文件编码为UTF-8的实现
2020/04/03 Python
GitHub上值得推荐的8个python 项目
2020/10/30 Python
英国时尚女装购物网站:Missguided
2018/08/23 全球购物
德国电子产品购物网站:TechInTheBasket德国
2018/12/07 全球购物
社区七一党员活动方案
2014/01/25 职场文书
热情服务标语
2014/10/07 职场文书
学习三严三实心得体会
2014/10/13 职场文书
餐馆开业致辞
2015/08/01 职场文书
2016春季运动会开幕词
2016/03/04 职场文书
自考生自我评价
2019/06/21 职场文书
golang协程池模拟实现群发邮件功能
2021/05/02 Golang
最新最全的手机号验证正则表达式
2022/02/24 Javascript
Python进程间的通信之语法学习
2022/04/11 Python