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 相关文章推荐
jquery ready()的几种实现方法小结
Jun 18 Javascript
javascript对talbe进行动态添加、删除、验证实现代码
Mar 29 Javascript
用JQuery实现全选与取消的两种简单方法
Feb 22 Javascript
jQuery validate插件submitHandler提交导致死循环解决方法
Jan 21 Javascript
java中String类型变量的赋值问题介绍
Mar 23 Javascript
JavaScript 字符串常用操作小结(非常实用)
Nov 30 Javascript
jQuery加载及解析XML文件的方法实例分析
Jan 22 Javascript
除Console.log()外更多的Javascript调试命令
Jan 24 Javascript
webpack+vue-cli项目中引入外部非模块格式js的方法
Sep 28 Javascript
JavaScript私有变量实例详解
Jan 24 Javascript
使用vue自定义指令开发表单验证插件validate.js
May 23 Javascript
Vue实现固定定位图标滑动隐藏效果
May 30 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中实现简单的ACL 完结篇
2011/09/07 PHP
php 中的4种标记风格介绍
2012/05/10 PHP
设置php页面编码的两种方法示例介绍
2014/03/03 PHP
PHP使用ffmpeg给视频增加字幕显示的方法
2015/03/12 PHP
PHP curl伪造IP地址和header信息代码实例
2015/04/27 PHP
PHP preg_match实现正则表达式匹配功能【输出是否匹配及匹配值】
2017/07/19 PHP
PHP+redis实现的悲观锁机制示例
2018/06/12 PHP
PHP的PDO预处理语句与存储过程
2019/01/27 PHP
JSON 入门指南 想了解json的朋友可以看下
2009/08/26 Javascript
js 父窗口控制子窗口的行为-打开,关闭,重定位,回复
2010/04/20 Javascript
jquery下利用jsonp跨域访问实现方法
2010/07/29 Javascript
jQuery如何取id有.的值一般的方法是取不到的
2014/04/18 Javascript
jQuery html()方法使用不了无法显示内容的问题
2014/08/06 Javascript
JavaScript使用DeviceOne开发实战(二) 生成调试安装包
2015/12/01 Javascript
第一次接触JS require.js模块化工具
2016/04/17 Javascript
jQuery.Callbacks()回调函数队列用法详解
2016/06/14 Javascript
JavaScript实现页面无操作倒计时退出
2016/10/22 Javascript
JS中数组重排序方法
2016/11/11 Javascript
详谈js中数组(array)和对象(object)的区别
2017/02/27 Javascript
Bootstrap fileinput组件封装及使用详解
2017/03/10 Javascript
微信小程序自定义弹窗wcPop插件
2018/11/19 Javascript
微信小程序如何修改本地缓存key中单个数据的详解
2019/04/26 Javascript
详解基于Wepy开发小程序插件(推荐)
2019/08/01 Javascript
微信小程序点击列表跳转到对应详情页过程解析
2019/09/26 Javascript
微信小程序自定义底部弹出框功能
2020/11/18 Javascript
Python生成8位随机字符串的方法分析
2017/12/05 Python
Python玩转加密的技巧【推荐】
2019/05/13 Python
django 取消csrf限制的实例
2020/03/13 Python
python 6.7 编写printTable()函数表格打印(完整代码)
2020/03/25 Python
Python中logging日志记录到文件及自动分割的操作代码
2020/08/05 Python
scrapy中如何设置应用cookies的方法(3种)
2020/09/22 Python
next在python中返回迭代器的实例方法
2020/12/15 Python
PyCharm 解决找不到新打开项目的窗口问题
2021/01/15 Python
selenium+超级鹰实现模拟登录12306
2021/01/24 Python
CK美国官网:Calvin Klein
2016/08/26 全球购物
Interhome丹麦:在线预订度假屋和公寓
2019/07/18 全球购物