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 mouseover、mouseout停止事件冒泡的解决方案
Apr 07 Javascript
JS去除数组重复值的五种不同方法
Sep 06 Javascript
点击显示指定元素隐藏其他同辈元素的方法
Feb 19 Javascript
Jquery修改页面标题title其它JS失效的解决方法
Oct 31 Javascript
AngularJS入门教程之ng-class 指令用法
Aug 01 Javascript
微信小程序学习之数据处理详解
Jul 05 Javascript
vue.js的computed,filter,get,set的用法及区别详解
Mar 08 Javascript
vue 自定义提示框(Toast)组件的实现代码
Aug 17 Javascript
layui table动态表头 改变表格头部 重新加载表格的方法
Sep 21 Javascript
uniapp开发小程序实现滑动页面控制元素的显示和隐藏效果
Dec 10 Javascript
利用JavaScript为句子加标题的3种方法示例
Jan 05 Javascript
vue3使用vue-router的完整步骤记录
Jun 20 Vue.js
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版自动生成文章摘要
2008/07/23 PHP
无JS,完全php面向过程数据分页实现代码
2012/08/27 PHP
PHP生成压缩文件实例
2015/02/07 PHP
php连接mysql之mysql_connect()与mysqli_connect()的区别
2020/07/19 PHP
javascript之可拖动的iframe效果代码
2008/08/01 Javascript
在模板页面的js使用办法
2010/04/01 Javascript
一个很简单的jquery+xml+ajax的无刷新树结构(无css,后台是c#)
2010/06/02 Javascript
js toFixed()方法的重写实现精度的统一
2014/03/06 Javascript
浅谈JavaScript实现面向对象中的类
2014/12/09 Javascript
javascript面向对象程序设计(一)
2015/01/29 Javascript
javascript自定义滚动条实现代码
2020/04/20 Javascript
基于BootStrap Metronic开发框架经验小结【五】Bootstrap File Input文件上传插件的用法详解
2016/05/12 Javascript
JS实现根据用户输入分钟进行倒计时功能
2016/11/14 Javascript
利用Angularjs中模块ui-route管理状态的方法
2016/12/27 Javascript
vue使用原生swiper代码实例
2020/02/05 Javascript
[02:38]DOTA2亚洲邀请赛 IG战队巡礼
2015/02/03 DOTA
[01:57]DOTA2上海特锦赛小组赛解说单车采访花絮
2016/02/27 DOTA
[00:37]2016完美“圣”典风云人物:AMS宣传片
2016/12/06 DOTA
Python中py文件引用另一个py文件变量的方法
2018/04/29 Python
Python实现多线程的两种方式分析
2018/08/29 Python
Python自动发送邮件的方法实例总结
2018/12/08 Python
Python可变参数会自动填充前面的默认同名参数实例
2019/11/18 Python
python在一个范围内取随机数的简单实例
2020/08/16 Python
详解Python中第三方库Faker
2020/09/25 Python
英国领先的在线旅游和休闲零售商:lastminute.com
2019/01/23 全球购物
Otticanet美国:最顶尖的世界名牌眼镜, 能得到打折季的价格
2019/03/10 全球购物
美国气象仪器、花园装饰和墙壁艺术商店:Wind & Weather
2019/05/29 全球购物
Oracle性能调优原则
2012/05/03 面试题
体育教师自我鉴定
2014/02/12 职场文书
一次性工伤赔偿协议书范本
2014/11/25 职场文书
2015年读书月活动总结
2015/03/26 职场文书
检讨书格式范文
2015/05/07 职场文书
68句权威创业名言
2019/08/26 职场文书
励志语录:只有自己足够强大,才能不被别人践踏
2020/01/09 职场文书
Python实现DBSCAN聚类算法并样例测试
2021/06/22 Python
为自由献出你的心脏!「进击的巨人展 FINAL」2022年6月在台开展
2022/04/13 日漫