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 相关文章推荐
IE JS编程需注意的内存释放问题
Jun 23 Javascript
用jquery实现学校的校历(asp.net+jquery ui 1.72)
Jan 01 Javascript
JavaScript 判断判断某个对象是Object还是一个Array
Jan 28 Javascript
JS 非图片动态loading效果实现代码
Apr 09 Javascript
Jquery的hover方法让鼠标经过li时背景变色
Sep 06 Javascript
用js判断输入是否为中文的函数
Mar 10 Javascript
绑定回车enter事件代码
May 18 Javascript
JavaScript实现简洁的俄罗斯方块完整实例
Mar 01 Javascript
实践中学习AngularJS表单
Mar 21 Javascript
AngularJS控制器详解及示例代码
Aug 16 Javascript
微信页面倒计时代码(解决safari不兼容date的问题)
Dec 13 Javascript
浅谈jQuery中事情的动态绑定
Feb 12 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 socket的讲解与实例分析
2013/06/13 PHP
提高javascript效率 一次判断,而不要次次判断
2012/03/30 Javascript
JavaScript splice()方法详解
2020/09/22 Javascript
jQuery获取Radio,CheckBox选择的Value值(示例代码)
2013/12/12 Javascript
javascript弹出页面回传值的方法
2015/01/28 Javascript
通过Jquery.cookie.js实现展示浏览网页的历史记录超管用
2015/10/23 Javascript
JavaScript的==运算详解
2016/07/20 Javascript
jQuery解析XML 详解及方法总结
2016/09/28 Javascript
JavaScript中localStorage对象存储方式实例分析
2017/01/12 Javascript
javascript设计模式之策略模式学习笔记
2017/02/15 Javascript
JS实现电商放大镜效果
2017/08/24 Javascript
JavaScript数组push方法使用注意事项
2017/10/30 Javascript
vue中手机号,邮箱正则验证以及60s发送验证码的实例
2018/03/16 Javascript
不得不知的ES6小技巧
2018/07/28 Javascript
JavaScript插入排序算法原理与实现方法示例
2018/08/06 Javascript
angular2组件中定时刷新并清除定时器的实例讲解
2018/08/31 Javascript
vue实现的仿淘宝购物车功能详解
2019/01/27 Javascript
微信小程序 多行文本显示...+显示更多按钮和收起更多按钮功能
2019/09/26 Javascript
区分vue-router的hash和history模式
2020/10/03 Javascript
JS中循环遍历数组的四种方式总结
2021/01/23 Javascript
python实现逆波兰计算表达式实例详解
2015/05/06 Python
Python编程中的文件读写及相关的文件对象方法讲解
2016/01/19 Python
基于asyncio 异步协程框架实现收集B站直播弹幕
2016/09/11 Python
Django与JS交互的示例代码
2017/08/23 Python
对python3 urllib包与http包的使用详解
2018/05/10 Python
python发送邮件脚本
2018/05/22 Python
python实现内存监控系统
2021/03/07 Python
python学习之hook钩子的原理和使用
2018/10/25 Python
Python中无限循环需要什么条件
2020/05/27 Python
python中怎么表示空值
2020/06/19 Python
HTML5语音识别标签写法附图
2013/11/18 HTML / CSS
帮一个朋友写的求职信
2014/08/09 职场文书
学校领导干部民主生活会整改方案
2014/09/29 职场文书
使用vue-element-admin框架从后端动态获取菜单功能的实现
2021/04/29 Vue.js
基于Python实现对比Exce的工具
2022/04/07 Python
element tree树形组件回显数据问题解决
2022/08/14 Javascript