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 可以拖动的DIV(二)
Jun 26 Javascript
AppBaseJs 类库 网上常用的javascript函数及其他js类库写的
Mar 04 Javascript
js实现addClass,removeClass,hasClass的函数代码
Jul 13 Javascript
Javascript绝句欣赏 一些经典的js代码
Feb 22 Javascript
Jquery 点击按钮自动高亮实现原理及代码
Apr 25 Javascript
jQuery性能优化技巧分析
Feb 20 Javascript
Backbone.js 0.9.2 源码注释中文翻译版
Jun 25 Javascript
JavaScript实现带箭头标识的多级下拉菜单效果
Aug 27 Javascript
JavaScript+canvas实现七色板效果实例
Feb 18 Javascript
Js判断H5上下滑动方向及滑动到顶部和底部判断的示例代码
Nov 15 Javascript
vue新vue-cli3环境配置和模拟json数据的实例
Sep 19 Javascript
es6 filter() 数组过滤方法总结
Apr 03 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
人大复印资料处理程序_查询篇
2006/10/09 PHP
PHP的FTP学习(二)
2006/10/09 PHP
克隆一个新项目的快捷方式
2013/04/10 PHP
PHP下的Oracle客户端扩展(OCI8)安装教程
2014/09/10 PHP
10条php编程小技巧
2015/07/07 PHP
PHP的全局错误处理详解
2016/04/25 PHP
纯CSS3实现质感细腻丝滑按钮
2021/03/09 HTML / CSS
可以把编码转换成 gb2312编码lib.UTF8toGB2312.js
2007/08/21 Javascript
来自chinaz的ajax获取评论代码
2008/05/03 Javascript
javascript权威指南 学习笔记之变量作用域分享
2011/09/28 Javascript
二叉树先序遍历的非递归算法具体实现
2014/01/09 Javascript
关闭页面时window.location事件未执行的原因分析及解决方案
2014/09/01 Javascript
js onmousewheel事件多次触发问题解决方法
2014/10/17 Javascript
javascript模拟php函数in_array
2015/04/27 Javascript
js验证真实姓名与身份证号是否匹配
2015/10/13 Javascript
浅析JavaScript中浏览器的兼容问题
2016/04/19 Javascript
node中koa中间件机制详解
2017/08/22 Javascript
vue2.0开发入门笔记之.vue文件的生成和使用
2017/09/19 Javascript
vue.js实现二级菜单效果
2019/10/19 Javascript
通过实例了解Nodejs模块系统及require机制
2020/07/16 NodeJs
谈一谈vue请求数据放在created好还是mounted里好
2020/07/27 Javascript
手把手教你实现 Promise的使用方法
2020/09/02 Javascript
vue 表单输入框不支持focus及blur事件的解决方案
2020/11/17 Vue.js
Python编程实现删除VC临时文件及Debug目录的方法
2017/03/22 Python
django使用html模板减少代码代码解析
2017/12/12 Python
Python实现简单遗传算法(SGA)
2018/01/29 Python
Python 从列表中取值和取索引的方法
2018/12/25 Python
解决Python logging模块无法正常输出日志的问题
2020/02/21 Python
linux系统下pip升级报错的解决方法
2021/01/31 Python
HTML5使用Audio标签实现歌词同步的效果
2016/03/17 HTML / CSS
在校大学生个人的自我评价
2014/02/13 职场文书
租房协议书怎么写
2014/04/10 职场文书
股东协议书
2014/04/14 职场文书
学习雷锋标语
2014/06/25 职场文书
学校教学管理制度
2015/08/06 职场文书
2019年怎样才能撰写出优秀的自荐信
2019/03/25 职场文书