JavaScript对JSON数据进行排序和搜索

 更新时间:2017年07月24日 09:26:07   作者:ma125120  
今天教给大家如何使用数组的方法来实现JSON数据进行排序和搜索功能,具体实例代码大家参考下本文吧

在使用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数据进行排序和搜索,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对脚本之家网站的支持!

相关文章

  • js简单实现表单中点击按钮动态增加输入框数量的方法

    js简单实现表单中点击按钮动态增加输入框数量的方法

    这篇文章主要介绍了js简单实现表单中点击按钮动态增加输入框数量的方法,涉及javascript鼠标点击事件及insertAdjacentHTML方法的相关使用技巧,需要的朋友可以参考下
    2015-08-08
  • 一文教你如何实现localStorage的过期机制

    一文教你如何实现localStorage的过期机制

    要知道localStorage本身并没有提供过期机制,既然如此那就只能我们自己来实现了,这篇文章主要给大家介绍了关于如何实现localStorage过期机制的相关资料,需要的朋友可以参考下
    2022-02-02
  • 构建一个JavaScript插件系统

    构建一个JavaScript插件系统

    这篇文章主要介绍了如何构建一个JavaScript插件系统,帮助大家更好的理解和使用JavaScript,感兴趣的朋友可以了解下
    2020-10-10
  • 如何用JS WebSocket实现简单聊天

    如何用JS WebSocket实现简单聊天

    这篇文章主要介绍了如何用JS WebSocket实现简单聊天,对websocket感兴趣的同学,可以参考下
    2021-05-05
  • js 数组详细操作方法及解析合集

    js 数组详细操作方法及解析合集

    在开发中,数组的使用场景非常多,平日中也涉及到很多数组的api/相关操作,一直也没有对这块内容进行一块整理总结,很多时候就算用过几次这个api,在开发中也很容易忘记,还是要谷歌一下
    2018-06-06
  • java实现单链表增删改查的实例代码详解

    java实现单链表增删改查的实例代码详解

    在本篇文章里小编给大家整理了关于java实现单链表增删改查的实例内容,需要的朋友们可以参考下。
    2019-08-08
  • 基于JavaScript实现div层跟随滚动条滑动

    基于JavaScript实现div层跟随滚动条滑动

    项目需求是这样的:在一个页面放2个悬浮框,悬浮框随页面的上下滚动有上下波动的效果,最终固定在同一位置,下面通过本文给大家分享基于JavaScript实现div层跟随滚动条滑动的相关资料,对js div跟随滚动条滑动相关知识感兴趣的朋友一起学习吧
    2016-01-01
  • JGrid中拖动改变列宽的脚本 原型

    JGrid中拖动改变列宽的脚本 原型

    JGrid 中,可以拖动改变列宽,简单的原理就是改变相应的 col 的 style.width 今天看到skybot 同学在问这个问题,就又把这个功能拿出来,单独实现了一下(有改进)
    2008-07-07
  • 扩展JS Date对象时间格式化功能的小例子

    扩展JS Date对象时间格式化功能的小例子

    这篇文章主要介绍了扩展JS Date对象时间格式化功能,有需要的朋友可以参考一下
    2013-12-12
  • javascript设计模式 – 适配器模式原理与应用实例分析

    javascript设计模式 – 适配器模式原理与应用实例分析

    这篇文章主要介绍了javascript设计模式 – 适配器模式,结合实例形式分析了javascript适配器模式相关概念、原理、用法及操作注意事项,需要的朋友可以参考下
    2020-04-04

最新评论