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 调试利器 Firebug使用详解六
Jul 05 Javascript
Javascript var变量隐式声明方法
Oct 19 Javascript
javascript查询字符串参数的方法
Jan 28 Javascript
js获取数组的最后一个元素
Apr 14 Javascript
JavaScritp添加url参数并将参数加入到url中及更改url参数的方法
Oct 26 Javascript
js改变css样式的三种方法推荐
Jun 28 Javascript
JavaScript数组去重的几种方法效率测试
Oct 23 Javascript
Bootstrap modal使用及点击外部不消失的解决方法
Dec 13 Javascript
详解在 Angular 项目中添加 clean-blog 模板
Jul 04 Javascript
详解webpack进阶之插件篇
Jul 06 Javascript
Vue.js递归组件构建树形菜单
Dec 24 Javascript
vue 实现根据data中的属性值来设置不同的样式
Aug 04 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的可变变量名需要的注意的问题
2013/06/20 PHP
PHP中list方法用法示例
2016/12/01 PHP
js 与或运算符 || && 妙用
2009/12/09 Javascript
Jquery+JSon 无刷新分页实现代码
2010/04/01 Javascript
javascript中获取下个月一号,是星期几
2012/06/01 Javascript
jQuery不间断滚动效果(模拟百度新闻支持文字/图片/垂直滚动)
2013/02/05 Javascript
js螺旋动画效果的具体实例
2013/11/15 Javascript
使用VS开发 Node.js指南
2015/01/06 Javascript
JS实现自适应高度表单文本框的方法
2015/02/25 Javascript
javascript事件冒泡实例分析
2015/05/13 Javascript
jQuery中的insertBefore(),insertAfter(),after(),before()区别介绍
2016/09/01 Javascript
简单实现JavaScript图片切换效果
2016/11/28 Javascript
node.js Sequelize实现单实例字段或批量自增、自减
2016/12/08 Javascript
零基础轻松学JavaScript闭包
2016/12/30 Javascript
利用vue + element实现表格分页和前端搜索的方法
2017/12/25 Javascript
react-redux中connect的装饰器用法@connect详解
2018/01/13 Javascript
解决Vue中引入swiper,在数据渲染的时候,发生不滑动的问题
2018/09/27 Javascript
vue store之状态管理模式的详细介绍
2019/06/13 Javascript
JS根据Unix时间戳显示发布时间是多久前【项目实测】
2019/07/10 Javascript
Vue-axios-post数据后端接不到问题解决
2020/01/09 Javascript
[45:32]Liquid vs LGD 2018国际邀请赛淘汰赛BO3 第二场 8.23
2018/08/24 DOTA
python opencv实现图片旋转矩形分割
2018/07/26 Python
一百多行python代码实现抢票助手
2018/09/25 Python
Python Django 实现简单注册功能过程详解
2019/07/29 Python
python的flask框架难学吗
2020/07/31 Python
借助HTML5 Canvas来绘制三角形和矩形等多边形的方法
2016/03/14 HTML / CSS
戴森香港官方网站:Dyson香港
2021/02/11 全球购物
大学毕业生工作的自我评价
2013/10/01 职场文书
自我鉴定总结
2014/03/24 职场文书
小学校长先进事迹材料
2014/05/13 职场文书
学校四风对照检查材料
2014/08/28 职场文书
八项规定个人对照检查材料思想汇报
2014/09/25 职场文书
2015年教师学期工作总结
2015/04/30 职场文书
商场圣诞节活动总结
2015/05/06 职场文书
英雄儿女观后感
2015/06/09 职场文书
Java中API的使用方法详情
2022/04/06 Java/Android