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具有类似Lambda表达式编程能力的代码(改进版)
Sep 14 Javascript
JS实现两个大数(整数)相乘
Apr 28 Javascript
jQuery Validate初步体验(二)
Dec 12 Javascript
Javascript之深入浅出prototype
Feb 06 Javascript
微信小程序中顶部导航栏的实现代码
Mar 30 Javascript
jquery中each循环的简单回滚操作
May 05 jQuery
VUE利用vuex模拟实现新闻点赞功能实例
Jun 28 Javascript
vue项目开发中setTimeout等定时器的管理问题
Sep 13 Javascript
vue-cli V3.0版本的使用详解
Oct 24 Javascript
在vue项目中使用sass语法问题
Jul 18 Javascript
nuxt 自定义 auth 中间件实现令牌的持久化操作
Nov 05 Javascript
一篇文章弄清楚Ajax请求的五个步骤
Mar 17 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及Zend Engine的线程安全模型分析
2011/11/10 PHP
php基于dom实现的图书xml格式数据示例
2017/02/03 PHP
Laravel多域名下字段验证的方法
2019/04/04 PHP
php常用的工具开发整理
2019/09/26 PHP
php use和include区别总结
2019/10/13 PHP
基于jquery的滚动条滚动固定div(附演示下载)
2012/10/29 Javascript
js实现图片放大缩小功能后进行复杂排序的方法
2012/11/08 Javascript
JavaScript调用客户端的可执行文件(示例代码)
2013/11/28 Javascript
js中for in的用法示例解析
2013/12/25 Javascript
js 3秒后跳转页面的实现代码
2014/03/10 Javascript
JavaScript的jQuery库中ready方法的学习教程
2015/08/14 Javascript
js+css绘制颜色动态变化的圈中圈效果
2016/01/27 Javascript
js从数组中删除指定值(不是指定位置)的元素实现代码
2016/09/13 Javascript
Node.js批量给图片加水印的方法
2016/11/15 Javascript
微信小程序中实现一对多发消息详解及实例代码
2017/02/14 Javascript
js实现九宫格的随机颜色跳转
2017/02/19 Javascript
jQuery实现的弹幕效果完整实例
2017/09/06 jQuery
JavaScript实现body内任意节点的自定义属性功能示例
2017/09/18 Javascript
React Native使用fetch实现图片上传的示例代码
2018/03/07 Javascript
Javascript中prototype与__proto__的关系详解
2018/03/11 Javascript
玩转vue的slot内容分发
2018/09/22 Javascript
Vue简单实现原理详解
2020/05/07 Javascript
vue 动态添加的路由页面刷新时失效的原因及解决方案
2021/02/26 Vue.js
python 输出一个两行字符的变量
2009/02/05 Python
Python中非常实用的一些功能和函数分享
2015/02/14 Python
图文详解WinPE下安装Python
2016/05/17 Python
Python实现好友全头像的拼接实例(推荐)
2017/06/24 Python
Python3调用微信企业号API发送文本消息代码示例
2017/11/10 Python
python实现人民币大写转换
2018/06/20 Python
查看keras各种网络结构各层的名字方式
2020/06/11 Python
英国工艺品购物网站:Minerva Crafts
2018/01/29 全球购物
AJAX应用和传统Web应用有什么不同
2013/08/24 面试题
追悼会主持词
2014/03/20 职场文书
环卫工作个人总结
2015/03/04 职场文书
家长必看:义务教育,不得以面试 评测等名义选拔学生
2019/07/09 职场文书
CSS3通过var()和calc()函数实现动画特效
2021/03/30 HTML / CSS