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中的Location地址对象
Jan 16 Javascript
让firefox支持IE的一些方法的javascript扩展函数代码
Jan 02 Javascript
Firefox下无法正常显示年份的解决方法
Sep 04 Javascript
JavaScript实现检查页面上的广告是否被AdBlock屏蔽了的方法
Nov 03 Javascript
对JavaScript中this指针的新理解分享
Jan 31 Javascript
js传值后台中文出现乱码的解决方法
Jun 30 Javascript
jQuery Easyui 下拉树组件combotree
Dec 16 Javascript
JavaScript实现实时更新系统时间的实例代码
Apr 04 Javascript
vue中子组件的methods中获取到props中的值方法
Aug 27 Javascript
vue如何自动化打包测试环境和正式环境的dist/test文件
Jun 06 Javascript
JavaScript创建表格的方法
Apr 13 Javascript
浅谈Vue使用Elementui修改默认的最快方法
Dec 05 Vue.js
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
超外差式晶体管收音机的组装与统调
2021/03/01 无线电
ezSQL PHP数据库操作类库
2010/05/16 PHP
PHP的Json中文处理解决方案
2016/09/29 PHP
一个js的tab切换效果代码[代码分离]
2010/04/11 Javascript
IE6,IE7,IE8下使用Javascript记录光标选中范围(已补全)
2011/08/28 Javascript
jquery自动切换tabs选项卡的具体实现
2013/12/24 Javascript
一个JavaScript的求爱小特效
2014/05/09 Javascript
基于javascript实现单选及多选的向右和向左移动实例
2015/07/25 Javascript
javascript倒计时效果实现
2015/11/12 Javascript
Bootstrap表单使用方法详解
2017/02/17 Javascript
jQuery实现表格隔行换色
2018/09/01 jQuery
vue缓存的keepalive页面刷新数据的方法
2019/04/23 Javascript
Vue使用Proxy监听所有接口状态的方法实现
2019/06/07 Javascript
手写Vue弹窗Modal的实现代码
2019/09/11 Javascript
layui输入框只允许输入中文且判断长度的例子
2019/09/18 Javascript
vue 重塑数组之修改数组指定index的值操作
2020/08/09 Javascript
js实现简单的无缝轮播效果
2020/09/05 Javascript
JavaScript常用工具函数库汇总
2020/09/17 Javascript
Vue页面渲染中key的应用实例教程
2021/01/12 Vue.js
[18:32]DOTA2 HEROS教学视频教你分分钟做大人-谜团
2014/06/12 DOTA
[47:03]完美世界DOTA2联赛PWL S3 access vs LBZS 第一场 12.20
2020/12/23 DOTA
Python字典数据对象拆分的简单实现方法
2017/12/05 Python
python正则实现计算器功能
2017/12/14 Python
django缓存配置的几种方法详解
2018/07/16 Python
Python 面试中 8 个必考问题
2018/11/16 Python
python itchat给指定联系人发消息的方法
2019/06/11 Python
Urban Outfitters英国官网:美国平价服饰品牌
2016/11/25 全球购物
中国跨境在线时尚零售商:Bellelily
2018/04/06 全球购物
中职生自我鉴定范文
2013/10/03 职场文书
联谊活动总结
2014/08/28 职场文书
税务职业生涯规划书范文
2014/09/16 职场文书
家庭贫困证明范本(经典版)
2014/09/22 职场文书
2014年乡镇卫生院工作总结
2014/11/24 职场文书
2015年学生会部门工作总结
2015/04/21 职场文书
慰问信的写作格式及范文!
2019/06/24 职场文书
《正面管教》读后有感:和善而坚定的旅程
2019/12/19 职场文书