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 相关文章推荐
JS 日期验证正则附asp日期格式化函数
Sep 11 Javascript
JS随即打乱数组实现代码
Dec 03 Javascript
基于JS2Image实现圣诞树代码
Dec 24 Javascript
jQuery实现的鼠标滑过弹出放大图片特效
Jan 08 Javascript
详解JavaScript异步编程中jQuery的promise对象的作用
May 03 Javascript
AngularJS 实现弹性盒子布局的方法
Aug 30 Javascript
JS实现字符串转驼峰格式的方法
Dec 16 Javascript
js实现鼠标单击Tab表单切换效果
May 16 Javascript
在小程序中集成redux/immutable/thunk第三方库的方法
Aug 12 Javascript
关于RxJS Subject的学习笔记
Dec 05 Javascript
angular中两种表单的区别(响应式和模板驱动表单)
Dec 06 Javascript
vue+moment实现倒计时效果
Aug 26 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
session 的生命周期是多长
2006/10/09 PHP
php控制linux服务器常用功能 关机 重启 开新站点等
2012/09/05 PHP
javascript静态的url如何传递
2007/05/03 Javascript
JavaScript 常用函数
2009/12/30 Javascript
niceTitle 基于jquery的超链接提示插件
2010/05/31 Javascript
javascript获取url上某个参数的方法
2013/11/08 Javascript
优化Jquery,提升网页加载速度
2013/11/14 Javascript
用javascript将数据导入Excel示例代码
2014/09/10 Javascript
JavaScript中的Promise使用详解
2015/06/24 Javascript
jQuery中extend函数详解
2015/07/13 Javascript
JavaScrip调试技巧之断点调试
2015/10/22 Javascript
酷炫jQuery全屏3D焦点图动画效果
2016/03/22 Javascript
JS实现将数字金额转换为大写人民币汉字的方法
2016/08/02 Javascript
JS时间控制实现动态效果的实例讲解
2017/07/31 Javascript
JavaScript实现联动菜单特效
2020/01/07 Javascript
jQuery操作事件完整实例分析
2020/01/10 jQuery
js与jquery获取input输入框中的值实例讲解
2020/02/27 jQuery
[02:11]2014DOTA2 TI专访VG战队Fenrir:队伍气氛良好
2014/07/11 DOTA
wxPython学习之主框架实例
2014/09/28 Python
Python脚本实现集群检测和管理功能
2015/03/06 Python
django admin组件使用方法详解
2019/07/19 Python
pygame实现俄罗斯方块游戏(基础篇1)
2019/10/29 Python
Python笔记之代理模式
2019/11/20 Python
Python读取YAML文件过程详解
2019/12/30 Python
html5 canvas移动浏览器上实现图片压缩上传
2016/03/11 HTML / CSS
英国领先的电视购物零售商:Ideal World
2019/03/18 全球购物
weblogic面试题
2016/03/07 面试题
群众路线剖析材料
2014/02/02 职场文书
校园活动宣传方案
2014/03/28 职场文书
团拜会策划方案
2014/06/07 职场文书
2014年党课学习心得体会
2014/07/08 职场文书
新颖的化妆品活动方案
2014/08/21 职场文书
KTV门卫岗位职责
2014/10/09 职场文书
机关作风建设剖析材料
2014/10/11 职场文书
女方离婚起诉书
2015/05/18 职场文书
Nginx+Tomcat负载均衡集群的实现示例
2021/10/24 Servers