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的变量作用域深入理解
Oct 25 Javascript
jquery异步调用页面后台方法‏(asp.net)
Mar 01 Javascript
jquery load()在firefox(火狐)下显示不正常的解决方法
Apr 05 Javascript
详解javascript的变量与标识符
Jan 04 Javascript
JavaScript中循环遍历Array与Map的方法小结
Mar 12 Javascript
JS iFrame加载慢怎么解决
May 13 Javascript
JS判断输入字符串长度实例代码(汉字算两个字符,字母数字算一个)
Aug 02 Javascript
详谈jQuery中使用attr(), prop(), val()获取value的异同
Apr 25 jQuery
vue组件传递对象中实现单向绑定的示例
Feb 28 Javascript
vue单页面在微信下只能分享落地页的解决方案
Apr 15 Javascript
echarts多条折线图动态分层的实现方法
May 24 Javascript
vue界面发送表情的实现代码
Sep 11 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数组实现无限分类,不使用数据库,不使用递归.
2006/12/09 PHP
PHP+SQL 注入攻击的技术实现以及预防办法
2010/12/29 PHP
php并发对MYSQL造成压力的解决方法
2013/02/21 PHP
php curl抓取网页的介绍和推广及使用CURL抓取淘宝页面集成方法
2015/11/30 PHP
php使用get_class_methods()函数获取分类的方法
2016/07/20 PHP
用Javascript同时提交多个Web表单的方法
2009/12/26 Javascript
js下用gb2312编码解码实现方法
2009/12/31 Javascript
JavaScript原型继承之基础机制分析
2011/08/26 Javascript
分页栏的web标准实现
2011/11/01 Javascript
浅谈jQuery事件绑定原理
2015/01/02 Javascript
JavaScript实现为input与textarea自定义hover,focus效果的方法
2015/08/21 Javascript
原生js实现吸顶效果
2017/03/13 Javascript
从零开始学习Node.js系列教程之基于connect和express框架的多页面实现数学运算示例
2017/04/13 Javascript
Vue开发中整合axios的文件整理
2017/04/29 Javascript
angularjs2中父子组件的数据传递的实例代码
2017/07/05 Javascript
Vue2路由动画效果的实现代码
2017/07/10 Javascript
vue轮播图插件vue-awesome-swiper的使用代码实例
2017/07/10 Javascript
JavaScript实现二叉树的先序、中序及后序遍历方法详解
2017/10/26 Javascript
3种vue组件的书写形式
2017/11/29 Javascript
vue-cli脚手架搭建的项目去除eslint验证的方法
2018/09/29 Javascript
移动端(微信等使用vConsole调试console的方法
2019/03/05 Javascript
ES6入门教程之let、const的使用方法
2019/04/13 Javascript
微信小程序实现的一键连接wifi功能示例
2019/04/24 Javascript
vue中echarts引入中国地图的案例
2020/07/28 Javascript
python中从str中提取元素到list以及将list转换为str的方法
2018/06/26 Python
python assert的用处示例详解
2019/04/01 Python
Python实现时间序列可视化的方法
2019/08/06 Python
Pytorch释放显存占用方式
2020/01/13 Python
Anaconda+Pycharm环境下的PyTorch配置方法
2020/03/13 Python
python 30行代码实现蚂蚁森林自动偷能量
2021/02/08 Python
css3的@media属性实现页面响应式布局示例代码
2014/02/10 HTML / CSS
惠普加拿大在线商店:HP加拿大
2017/09/15 全球购物
马耳他航空公司官方网站:Air Malta
2019/05/15 全球购物
运动会入场词100字
2014/02/06 职场文书
写给老婆的检讨书
2014/02/21 职场文书
2015年国庆节演讲稿范文
2015/07/30 职场文书