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 相关文章推荐
飞鱼(shqlsl) javascript作品集
Dec 16 Javascript
js压缩利器
Feb 20 Javascript
使用javascript做的一个随机点名程序
Feb 13 Javascript
利用js制作html table分页示例(js实现分页)
Apr 25 Javascript
JavaScript中用toString()方法返回时间为字符串
Jun 12 Javascript
jQuery三级下拉列表导航菜单代码分享
Apr 15 Javascript
JavaScript实现的多个图片广告交替显示效果代码
Sep 04 Javascript
jQuery使用$.each遍历json数组的简单实现方法
Apr 18 Javascript
jquery实现轮播图效果
Feb 13 Javascript
JavaScript基于面向对象实现的猜拳游戏
Jan 03 Javascript
ES6中的class是如何实现的(附Babel编译的ES5代码详解)
May 17 Javascript
简单了解微信小程序 e.target与e.currentTarget的不同
Sep 27 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
一些操作和快捷键的理解和讨论
2020/03/04 星际争霸
PHP 单引号与双引号的区别
2009/11/24 PHP
WordPress判断用户是否登录的代码
2011/03/17 PHP
CURL的学习和应用(附多线程实现)
2013/06/03 PHP
PHP打开和关闭文件操作函数总结
2014/11/18 PHP
PHP导入导出Excel代码
2015/07/07 PHP
浅谈COOKIE和SESSION区别
2015/07/19 PHP
PHP简单判断手机设备的方法
2016/08/23 PHP
Smarty模板类内部原理实例分析
2019/07/03 PHP
关于js中window.location.href,location.href,parent.location.href,top.location.href的用法与区别
2010/10/18 Javascript
jqeury-easyui-layout问题解决方法
2014/03/24 Javascript
JavaScript字符串删除重复字符的方法
2015/12/25 Javascript
微信小程序 教程之条件渲染
2016/10/18 Javascript
js实现拖拽上传图片功能
2017/08/01 Javascript
JS简单获取并修改input文本框内容的方法示例
2018/04/08 Javascript
vue-cli项目中使用Mockjs详解
2018/05/14 Javascript
JS开发常用工具函数(小结)
2019/07/04 Javascript
Vue的编码技巧与规范使用详解
2019/08/28 Javascript
JavaScript修改注册表实例代码
2020/01/05 Javascript
JavaScript实现网页下拉菜单效果
2020/11/20 Javascript
微信小程序向Java后台传输参数的方法实现
2020/12/10 Javascript
[44:50]DOTA2上海特级锦标赛B组小组赛#2 VG VS Fnatic第二局
2016/02/26 DOTA
在Python中使用正则表达式的方法
2015/08/13 Python
python下os模块强大的重命名方法renames详解
2017/03/07 Python
python批量实现Word文件转换为PDF文件
2018/03/15 Python
用Python绘制漫步图实例讲解
2020/02/26 Python
Python 基于jwt实现认证机制流程解析
2020/06/22 Python
Python如何实现机器人聊天
2020/09/10 Python
一款基于css3和jquery实现的动画显示弹出层按钮教程
2015/01/04 HTML / CSS
用HTML5制作烟火效果的教程
2015/05/12 HTML / CSS
维多利亚的秘密官方网站:Victoria’s Secret
2018/10/24 全球购物
冰淇淋店创业计划书范文
2013/12/27 职场文书
工作个人的自我评价
2014/01/14 职场文书
生日主持词
2014/03/20 职场文书
市场部岗位职责
2015/02/12 职场文书
HDFS免重启挂载新磁盘
2022/04/06 Servers