基于JavaScript实现Json数据根据某个字段进行排序

一.首先给大家介绍js中内置的 sort() 方法

此方法默认是按字母顺序对数组中的元素进行排序的，说得更精确点，是按照字符编码的顺序进行排序。

看如下例子：

当数组中元素为 数字类型 时，排序结果与我们设想的完全不同，因为默认是按照字符编码的顺序进行排序的。

解决方案：sort() 方法接收一个可选参数(此参数必须是函数)，我们可以自己定义排序规则，如下图

二.  对 json 排序的具体实现

/*
     * @description    根据某个字段实现对json数组的排序
     * @param   array  要排序的json数组对象
     * @param   field  排序字段（此参数必须为字符串）
     * @param   reverse 是否倒序（默认为false）
     * @return  array  返回排序后的json数组
    */
    function jsonSort(array, field, reverse) {
      //数组长度小于2 或 没有指定排序字段 或 不是json格式数据
      if(array.length < 2 || !field || typeof array[0] !== "object") return array;
      //数字类型排序
      if(typeof array[0][field] === "number") {
        array.sort(function(x, y) { return x[field] - y[field]});
      }
      //字符串类型排序
      if(typeof array[0][field] === "string") {
        array.sort(function(x, y) { return x[field].localeCompare(y[field])});
      }
      //倒序
      if(reverse) {
        array.reverse();
      }
      return array;
    }

PS：JS中：json对象数组按对象属性排序

var array = [
  {name: 'a', phone: 1},
  {name: 'b', phone: 5},
  {name: 'd', phone: 3},
  {name: 'c', phone: 4}
]
array.sort(getSortFun('desc', 'phone'));
function getSortFun(order, sortBy) {
  var ordAlpah = (order == 'asc') ? '>' : '<';
  var sortFun = new Function('a', 'b', 'return a.' + sortBy + ordAlpah + 'b.' + sortBy + '?1:-1');
  return sortFun;
}
alert(JSON.stringify(array));

数组本身有sort方法，可以指定排序函数，因此可以动态生成一个排序函数来完成对按指定对象属性排序的需求；

注意：sort后原数组序列会发生变化！！

赞 (0)

相关推荐

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

    在使用AJAX获取数据时后台返回的大部分都是json数据,在进行程序开发时有时会需要直接对这些json数据在js程序中再进行一定的操作,如排序.搜索等,而不是通过AJAX请求由数据库进行这些操作. 今天我就教给大家如何使用数组的方法来实现这些操作: /*假设json就是后台传过来的json数据*/ var test=[ { price:15, id:1, description:'这是第一个数据' },{ price:30, id:3, description:'这是第二个数据' },{ pri

  • javascript对JSON数据排序的3个例子

    一.适用于数字排序和字幕排序 json 的排序方法有很多种,这是其中最简单的一种方法. 复制代码 代码如下: var sortBy = function (filed, rev, primer) {     rev = (rev) ? -1 : 1;     return function (a, b) {         a = a[filed];         b = b[filed];         if (typeof (primer) != 'undefined') {      

  • ajax返回的json内容进行排序使用sort()方法实现

    关键方法:sort()用于对数组的元素进行排序. return a.num-b.num是升序: return b.num-a.num;是降序 writeln在输出后面加\n,在文档里是换行,在html里是解释称空格. 复制代码 代码如下: $.post("json.json",function(data){ data.sort(function(a,b){return a.num-b.num;}); for(var i=0;i<data.length;i++){ var nums

  • json数据处理技巧(字段带空格、增加字段、排序等等)

    1.json数据的正常取值:json[i].fieldName 2.json数据的字段带空格:eval('json[' + i + ']["' + field + '"]') 3.json数据的赋值:eval('json[' + i + ']["' + field + '"]=' + jsonFilter.length); 4.json数据增加字段:循环所有数据,直接json[i].newField=defaultValue就可以了 5.json数据的排序:相当于数

  • 利用jsonp跨域调用百度js实现搜索框智能提示

    利用jsonp跨域调用百度js实现搜索框智能提示

    项目中常常用到搜索,特别是导航类的网站.自己做关键字搜索不太现实,直接调用百度的是最好的选择. 使用jquery.ajax的jsonp方法可以异域调用到百度的js并拿到返回值,当然$.getScript也可以实现跨域调用js. ok,了解了jsonp的原理和应用后,我们看看百度的智能提示是如何做的 在chrome的调试窗口下看看百度搜索发出的请求.当输入关键字"a",请求如图: 用firebug看下请求的参数,如图: 请求方式:get请求 请求参数:wd明显是要搜索的关键字:cb是请求

  • jquery+json实现的搜索加分页效果

    1.Web 里面有三个目录: 1.1 content.htm //这个文件直接运行就行 1.2 js //这里面有用到的几个js 文件,其中 以db 开头的就是数据源(就是json 串) 1.3 css //css 就不用说了 2. 直接运行 content.htm 就可以直接打开查看分页和搜索效果了 3. 原理很简单,只是用了javascript 的index 函数核心代码: 复制代码 代码如下: /* author: liulf function: var __db_cpcj=vCpcj;

  • jQuery对JSON数据进行排序输出的方法

    本文实例讲述了jQuery对JSON数据进行排序输出的方法.分享给大家供大家参考.具体实现方法如下: $.getJSON('URl',function(data){ data.sort(function(a,b){return a.demoname-b.demoname}); for(i=0;i<data.length;i++){ alert(data[i].demoname) } }) 希望本文所述对大家的jQuery程序设计有所帮助.

  • json格式数据的添加，删除及排序方法

    本文实例讲述了json格式数据的添加,删除及排序方法.分享给大家供大家参考,具体如下: js数据格式和json数据格式,各有各的用处,就个人而言,json更好用一点,js自身的数组和对像限制比较多. 以js的数组举例: var a = ['1']; a[5] = 52; a.length //这儿的结果是6,也就是说,中间的key会自动补全,而值呢,是undefined 一.添加和删除 1.一维数组 test = {}; //空json对像 test['firstname'] = "tank&q

  • 基于JavaScript实现Json数据根据某个字段进行排序

    基于JavaScript实现Json数据根据某个字段进行排序

    一.首先给大家介绍js中内置的 sort() 方法 此方法默认是按字母顺序对数组中的元素进行排序的,说得更精确点,是按照字符编码的顺序进行排序. 看如下例子: 当数组中元素为 数字类型 时,排序结果与我们设想的完全不同,因为默认是按照字符编码的顺序进行排序的. 解决方案:sort() 方法接收一个可选参数(此参数必须是函数),我们可以自己定义排序规则,如下图 二.  对 json 排序的具体实现 /* * @description 根据某个字段实现对json数组的排序 * @param arra

  • jQuery基于ajax操作json数据简单示例

    本文实例讲述了jQuery基于ajax操作json数据的方法.分享给大家供大家参考,具体如下: jQuery Ajax 实例演示 jQuery Ajax 的三种格式,在与后台进行数据交互的时候可以是json格式也可以是xml格式,本人建议将数据转化成json格式. Xml与json的比较 1.可读性 JSON和XML的可读性可谓不相上下,一边是建议的语法,一边是规范的标签形式,很难分出胜负. 2.可扩展性 XML天生有很好的扩展性,JSON当然也有,没有什么是XML能扩展,JSON不能的. 3.

  • JavaScript解析JSON数据示例

    JavaScript解析JSON数据示例

    本文实例讲述了JavaScript解析JSON数据.分享给大家供大家参考,具体如下: JSON数据是一种常用的数据格式,解析方式也比较简单,特别是由于JavaScript原生就支持JSON,所以JavaScript能够更好的解析JSON. <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8&quo

  • 基于JavaScript实现带数据验证和复选框的表单提交

    实现: 1.用户至少选中某项,即表示选中该行,同时该行的数据验证通过,表单提交:否则,不提交. html <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>带数据验证和复选框的表单提交</title> <script src="../commonJqery/jquery-3.0.0.js&q

  • Python实现针对json中某个关键字段进行排序操作示例

    Python实现针对json中某个关键字段进行排序操作示例

    本文实例讲述了Python实现针对json中某个关键字段进行排序操作.分享给大家供大家参考,具体如下: 示例: json_array = [{"time":20150312,"value":"c"}, {"time":20150301,"value":"a"}, {"time":20150305,"value":"b"}] js

  • 基于jstree使用JSON数据组装成树

    基于jstree使用JSON数据组装成树

    概述: 前面主要是html数据,这里主要是json数组 1.格式 jsTree需要一个具体格式JSON数据,在标准的语法没有那个字段是必须的-而是那些是你需要的.请记住你可以获取任何你请求的其他属性,jsTree将会不会碰他们,你将有可能在随后使用它们. 为了改变节点的图标你可以是用属性icon.具体的字符串需要包含/的一个图片的url路径,你可以使用任何其它字符串应用类样式去修饰<i>元素,它将会被用呈现这个图标.你可以使用boolean 值false来jsTree在渲染节点时没有图标. 你

  • 基于javascript的JSON格式页面展示美化方法

    {"name": "monkey","age": "24","height": 164.0} 如果想让以上json字符串在页面上展示的比较易读,即变成下面的style: { "name": "monkey", "age": "24", "height": 164.0cm } 本文介绍的方法基于javascri

  • Javascript中JSON数据分组优化实践及JS操作JSON总结

    现有一堆数据,我需要按时间进行分组,以便前端视图呈现 [ {"date":"2017-12-22","start_time":"10:00:00","end_time":"10:00:00","status":"Performance Time"}, {"date":"2017-12-22","st

  • 基于JavaScript实现前端数据多条件筛选功能

    基于JavaScript实现前端数据多条件筛选功能

    有时候也会需要在前端进行数据筛选,增强交互体验.当数据可用的筛选条件较多时,把逻辑写死会给后期维护带来很大麻烦.下面是我自己写的一个简单的筛选器,筛选条件可以根据数据包含的字段动态设置. 仿照京东的筛选条件,这里就取价格区间和品牌作为测试. 代码 代码中主要使用js的过滤器Array.prototype.filter,该方法会对数组元素进行遍历检查,返回一个符合检查条件的新数组,不会改变原数组. // filter() var foo = [0,1,2,3,4,5,6,7,8,9]; var f

随机推荐