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 相关文章推荐
EasyUi tabs的高度与宽度根据IE窗口的变化自适应代码
Oct 26 Javascript
JavaScript子类用Object.getPrototypeOf去调用父类方法解析
Dec 05 Javascript
使用bootstrap3开发响应式网站
May 12 Javascript
基于原生js淡入淡出函数封装(兼容IE)
Oct 20 Javascript
JavaScript判断浏览器对CSS3属性是否支持的多种方法
Nov 13 Javascript
JavaScript中发出HTTP请求最常用的方法
Jul 12 Javascript
详解如何从零开始搭建Express+Vue开发环境
Jul 17 Javascript
解决vue+element 键盘回车事件导致页面刷新的问题
Aug 25 Javascript
解决vue.js 数据渲染成功仍报错的问题
Aug 25 Javascript
Angular单元测试之事件触发的实现
Jan 20 Javascript
JS原形与原型链深入详解
May 09 Javascript
微信小程序实现电影App导航和轮播
Nov 30 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 mvc开发模式的感想
2011/06/28 PHP
PHP判断JSON对象是否存在的方法(推荐)
2016/07/06 PHP
不用ajax实现点击文字即可编辑的方法
2007/12/16 Javascript
JQuery 选项卡效果(JS与HTML的分离)
2010/04/01 Javascript
js 父窗口控制子窗口的行为-打开,关闭,重定位,回复
2010/04/20 Javascript
JS函数验证总结(方便js客户端输入验证)
2010/10/29 Javascript
js 获取元素在页面上的偏移量的方法汇总
2015/04/13 Javascript
JS短信验证码倒计时功能的实现(没有验证码,只有倒计时)
2016/10/27 Javascript
javascript 单例模式详解及简单实例
2017/02/14 Javascript
详解Vue路由自动注入实践
2019/04/17 Javascript
原生javascript单例模式的应用实例分析
2020/02/23 Javascript
用vue 实现手机触屏滑动功能
2020/05/28 Javascript
[03:44]2014DOTA2国际邀请赛 71专访:DK战队赛前讨论视频遭泄露
2014/07/13 DOTA
Python 不同对象比较大小示例探讨
2014/08/21 Python
python自动化测试之setUp与tearDown实例
2014/09/28 Python
Python解析网页源代码中的115网盘链接实例
2014/09/30 Python
详解appium+python 启动一个app步骤
2017/12/20 Python
python定位xpath 节点位置的方法
2019/08/27 Python
python实现生成Word、docx文件的方法分析
2019/08/30 Python
Pandas实现一列数据分隔为两列
2020/05/18 Python
Python爬虫获取豆瓣电影并写入excel
2020/07/31 Python
CSS3实现时间轴效果
2016/07/11 HTML / CSS
New Balance美国官网:运动鞋和健身服装
2017/04/11 全球购物
预订从美国飞往印度的机票:MyTicketsToIndia
2017/05/19 全球购物
皮姆斯勒语言学习:Pimsleur Language Programs
2018/06/30 全球购物
Bose美国官网:购买Bose耳机和音箱
2019/03/10 全球购物
凯普林包包西班牙官网:Kipling西班牙
2019/04/12 全球购物
七匹狼男装广告词
2014/03/21 职场文书
办理房产证委托书
2014/09/18 职场文书
民政局副局长民主生活会个人整改措施
2014/10/04 职场文书
2015年大学元旦晚会活动策划书
2014/12/09 职场文书
社区五一劳动节活动总结
2015/02/09 职场文书
学年个人总结范文
2015/03/05 职场文书
实习单位鉴定意见
2015/06/04 职场文书
MATLAB 全景图切割及盒图显示的实现步骤
2021/05/14 Python