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 相关文章推荐
Prototype中dom对象方法汇总
Sep 17 Javascript
JavaScript prototype属性使用说明
May 13 Javascript
jQuery Tools tab使用介绍
Jul 14 Javascript
使用js操作cookie的一点小收获分享
Sep 03 Javascript
简介JavaScript中的push()方法的使用
Jun 09 Javascript
JS、jQuery中select的用法详解
Apr 21 Javascript
Bootstrap每天必学之警告框插件
Apr 26 Javascript
基于jQuery实现页面搜索功能
Mar 26 Javascript
javascript中的try catch异常捕获机制用法分析
Dec 14 Javascript
webpack HappyPack实战详解
Oct 08 Javascript
Vue 路由间跳转和新开窗口的方式(query、params)
Dec 25 Javascript
vue2.x数组劫持原理的实现
Apr 19 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/10/09 PHP
PHP文本操作类
2006/11/25 PHP
require(),include(),require_once()和include_once()的异同
2007/01/02 PHP
PHP取二进制文件头快速判断文件类型的实现代码
2013/08/05 PHP
PHP实现微信模拟登陆并给用户发送消息的方法【文字,图片,图文】
2017/06/29 PHP
php魔法函数与魔法常量使用介绍
2017/07/23 PHP
php判断str字符串是否是xml格式数据的方法示例
2017/07/26 PHP
ie focus bug 解决方法
2009/09/03 Javascript
JavaScript定义类或函数的几种方式小结
2011/01/09 Javascript
调试Javascript代码(浏览器F12及VS中debugger关键字)
2013/01/25 Javascript
巧用jquery解决下拉菜单被Div遮挡的相关问题
2014/02/13 Javascript
简单易用的倒计时js代码
2014/08/04 Javascript
js简单实现Select互换数据的方法
2015/08/17 Javascript
Javascript中作用域的详细介绍
2016/10/06 Javascript
JS中解决谷歌浏览器记住密码输入框颜色改变功能
2017/02/13 Javascript
React.Js添加与删除onScroll事件的方法详解
2017/11/03 Javascript
vue.js数据绑定操作详解
2018/04/23 Javascript
js实现同一个页面,多个enter事件绑定的示例
2018/10/10 Javascript
TypeScript中的方法重载详解
2019/04/12 Javascript
js tab栏切换代码实例解析
2019/09/03 Javascript
对layui中table组件工具栏的使用详解
2019/09/19 Javascript
vue3.0自定义指令(drectives)知识点总结
2020/12/27 Vue.js
Python闭包执行时值的传递方式实例分析
2018/06/04 Python
python3实现二叉树的遍历与递归算法解析(小结)
2019/07/03 Python
pytorch 使用单个GPU与多个GPU进行训练与测试的方法
2019/08/19 Python
wxPython之wx.DC绘制形状
2019/11/19 Python
PyTorch中Tensor的数据类型和运算的使用
2020/09/03 Python
CSS3美化表单控件全集
2016/06/29 HTML / CSS
Ivory Isle Designs美国/加拿大:婚礼和活动文具公司
2018/08/21 全球购物
自我评价200字分享
2013/12/17 职场文书
优秀干部获奖感言
2014/01/31 职场文书
期末学生评语大全
2014/04/24 职场文书
法律意见书范文
2015/05/20 职场文书
幼儿园语言教学反思
2016/02/23 职场文书
解决golang post文件时Content-Type出现的问题
2021/05/02 Golang
使用这 6个Vue加载动画库来减少我们网站的跳出率
2021/05/18 Vue.js