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 相关文章推荐
IE6下js通过css隐藏select的一个bug
Aug 16 Javascript
Jquery和JS用外部变量获取Ajax返回的参数值的方法实例(超简单)
Jun 17 Javascript
js日期插件dateHelp获取本月、三个月、今年的日期
Mar 07 Javascript
jQuery选择器基础入门教程
May 10 Javascript
jquery dialog获取焦点的方法
Feb 09 Javascript
AngularJS select设置默认值的实现方法
Aug 25 Javascript
Angular实现类似博客评论的递归显示及获取回复评论的数据
Nov 06 Javascript
基于jQuery实现Ajax验证用户名是否可用实例
Mar 25 jQuery
Node.js Express安装与使用教程
May 11 Javascript
图文详解vue框架安装步骤
Feb 12 Javascript
Vue两种组件类型:递归组件和动态组件的用法
Aug 06 Javascript
在react项目中使用antd的form组件,动态设置input框的值
Oct 24 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查询及多条件查询
2017/02/26 PHP
浅析PHP中的闭包和匿名函数
2017/12/25 PHP
jquery tab标签页的制作
2010/05/10 Javascript
浅谈关于JavaScript的语言特性分析
2013/04/11 Javascript
jquery插件jTimer(jquery定时器)使用方法
2013/12/23 Javascript
jquery实现不同大小浏览器使用不同的css样式表的方法
2014/04/02 Javascript
javascript生成随机数方法汇总
2015/11/12 Javascript
详解js中call与apply关键字的作用
2016/11/21 Javascript
jQuery获取单选按钮radio选中值与去除所有radio选中状态的方法
2017/05/20 jQuery
jQuery常见面试题之DOM操作详析
2017/07/05 jQuery
详解Vue 事件修饰符capture 的使用
2017/12/29 Javascript
webpack4简单入门实例
2018/09/06 Javascript
如何解决vue2.0下IE浏览器白屏问题
2018/09/13 Javascript
使用Phantomjs和Node完成网页的截屏快照的方法
2019/07/16 Javascript
layuiAdmin循环遍历展示商品图片列表的方法
2019/09/16 Javascript
原生js实现html手机端城市列表索引选择城市
2020/06/24 Javascript
python在linux系统下获取系统内存使用情况的方法
2015/05/11 Python
Python实现SMTP发送邮件详细教程
2021/03/02 Python
详解python中init方法和随机数方法
2019/03/13 Python
pandas 数据结构之Series的使用方法
2019/06/21 Python
利用Python实现手机短信监控通知的方法
2019/07/22 Python
pycharm的python_stubs问题
2020/04/08 Python
Python实现我的世界小游戏源代码
2021/03/02 Python
京东全球售:直邮香港,澳门,台湾,美国,澳大利亚等地区
2017/09/24 全球购物
英国知名美妆护肤在线商城:Zest Beauty
2018/04/24 全球购物
亚洲最大的眼镜批发商和零售商之一:Glasseslit
2018/10/08 全球购物
澳大利亚优质的家居用品和生活方式公司:Bed Bath N’ Table
2019/04/16 全球购物
美国精油公司:Plant Therapy
2019/05/17 全球购物
编程实现当输入某产品代码则打印出该产品记录的功能
2014/05/03 面试题
sort命令的作用和用法
2012/11/04 面试题
MVC的各个部分都有那些技术来实现?如何实现?
2016/04/21 面试题
什么是方法的重载
2013/06/24 面试题
公司中层干部的自我评价分享
2014/03/01 职场文书
二年级学生期末评语
2014/12/26 职场文书
2015年后备干部工作总结
2015/05/15 职场文书
小学生教师节广播稿
2015/08/19 职场文书