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 设置文本框中焦点的位置
Nov 20 Javascript
jquery 图片Silhouette Fadeins渐显效果
Feb 07 Javascript
用js模拟JQuery的show与hide动画函数代码
Sep 20 Javascript
jquery选择器之属性过滤选择器详解
Jan 27 Javascript
jquery validate demo 基础
Oct 29 Javascript
AngularJS实现单独作用域内的数据操作
Sep 05 Javascript
js实现各种复制到剪贴板的方法(分享)
Oct 27 Javascript
JavaScript实现弹出广告功能
Mar 30 Javascript
深入理解JavaScript和TypeScript中的class
Apr 22 Javascript
不使用JavaScript实现菜单的打开和关闭效果demo
May 01 Javascript
vue之封装多个组件调用同一接口的案例
Aug 11 Javascript
Vue使用鼠标在Canvas上绘制矩形
Dec 24 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
snoopy PHP版的网络客户端提供本地下载
2008/04/15 PHP
php数组转成json格式的方法
2015/03/09 PHP
给PHP开发者的编程指南 第一部分降低复杂程度
2016/01/18 PHP
js中reverse函数的用法详解
2013/12/26 Javascript
jQuery中bind()方法用法实例
2015/01/19 Javascript
js设置document.domain实现跨域的注意点分析
2015/05/21 Javascript
极易被忽视的javascript面试题七问七答
2016/02/15 Javascript
基于jquery实现轮播焦点图插件
2016/03/31 Javascript
浅谈JavaScript 浏览器对象
2016/06/03 Javascript
Ajax基础知识详解
2017/02/17 Javascript
Vue非父子组件通信详解
2017/06/12 Javascript
详解Vue用自定义指令完成一个下拉菜单(select组件)
2017/10/31 Javascript
微信小程序实现循环动画效果
2018/07/16 Javascript
使用layui日期控件laydate对开始和结束时间进行联动控制的方法
2019/09/06 Javascript
node crawler如何添加promise支持
2020/02/01 Javascript
javascript中可能用得到的全部的排序算法
2020/03/05 Javascript
jquery实现烟花效果(面向对象)
2020/03/10 jQuery
Postman内建变量常用方法实例解析
2020/07/28 Javascript
[01:34]2014DOTA2 TI预选赛预选赛 选手比赛房大揭秘!
2014/05/20 DOTA
Python3 操作符重载方法示例
2017/11/23 Python
Python+tkinter使用40行代码实现计算器功能
2018/01/30 Python
python通过ffmgep从视频中抽帧的方法
2018/12/05 Python
Python实现的排列组合、破解密码算法示例
2019/04/12 Python
Python中请不要再用re.compile了
2019/06/30 Python
python 同时读取多个文件的例子
2019/07/16 Python
Django操作session 的方法
2020/03/09 Python
Django ORM判断查询结果是否为空,判断django中的orm为空实例
2020/07/09 Python
Python爬虫新手入门之初学lxml库
2020/12/20 Python
大专计算机个人求职的自我评价
2013/10/21 职场文书
大三学生入党思想汇报
2014/01/02 职场文书
学生上课说话检讨书
2014/10/25 职场文书
同事离别感言
2015/08/04 职场文书
创业计划书之便利店
2019/09/05 职场文书
MySQL基于索引的压力测试的实现
2021/11/07 MySQL
MySQL中B树索引和B+树索引的区别详解
2022/03/03 MySQL
Nginx+Windows搭建域名访问环境的操作方法
2022/03/17 Servers