js中json对象数组按对象属性排序---1
转载：https://www.cnblogs.com/jasonwang2y60/p/6656103.html
在实际工作经常会出现这样一个问题：后台返回一个数组中有i个json数据，需要我们根据json中某一项进行数组的排序。
例如返回的数据结构大概是这样：
{
result:[
{id:1,name:'中国银行'},
{id:3,name:'北京银行'},
{id:2,name:'河北银行'},
{id:10,name:'保定银行'},
{id:7,name:'涞水银行'}
]
}
现在我们根据业务需要，要根据id的大小进行排序，按照id小的json到id大的json顺序重新排列数组的顺序
在js中添加排序的方法：
这里使用JavaScript sort() 方法，首先解释下这个sort的方法
语法：arrayObject.sort(sortby) sortby：可选，规定排序顺序。必须是函数。
如果调用该方法时没有使用参数，将按字母顺序对数组中的元素进行排序，说得更精确点，是按照字符编码的顺序进行排序。要实现这一点，首先应把数组的元素都转换成字符串（如有必要），以便进行比较。
如果想按照其他标准进行排序，就需要提供比较函数，该函数要比较两个值，然后返回一个用于说明这两个值的相对顺序的数字。比较函数应该具有两个参数 a 和 b，其返回值如下：
- 若 a 小于 b，在排序后的数组中 a 应该出现在 b 之前，则返回一个小于 0 的值。
- 若 a 等于 b，则返回 0。
- 若 a 大于 b，则返回一个大于 0 的值。
下面开始使用sort(sortby) 来进行这个排序，并打印到控制台：
function sortId(a,b){
return a.id-b.id
}
result.sort(sortId);
console.log(result);
然后查看控制台，排序成功：
附： 前端机试题一个（对数据进行排序）
<!DOCTYPE html>
<html>
<head>
<title></title>
<style type="text/css">
body, html {
padding: 0;
margin: 0;
font-size: 14px;
color: #000000;
} table {
border-collapse: collapse;
width: 100%;
table-layout: fixed;
} thead {
background: #3d444c;
color: #ffffff;
} td, th {
border: 1px solid #e1e1e1;
padding: 0;
height: 30px;
line-height: 30px;
text-align: center;
} .sort-asc::after,
.sort-desc::after {
content: ' ';
display: inline-block;
margin-left: 5px;
vertical-align: middle; }
.sort-asc::after {
border-left: 4px solid transparent;
border-right: 4px solid transparent;
border-bottom: 4px solid #eee;
}
.sort-desc::after {
border-left: 4px solid transparent;
border-right: 4px solid transparent;
border-top: 4px solid #eee;
}
</style>
</head>
<body>
<table>
<thead id="jsHeader">
<tr>
<th>product</th>
<th>price</th>
<th>sales</th>
</tr>
</thead>
<tbody id="jsList">
<tr>
<td>1</td>
<td>10.0</td>
<td>800</td>
</tr>
<tr>
<td>2</td>
<td>30.0</td>
<td>300</td>
</tr>
<tr>
<td>3</td>
<td>20.5</td>
<td>100</td>
</tr>
<tr>
<td>4</td>
<td>40.5</td>
<td>200</td>
</tr>
<tr>
<td>5</td>
<td>60.5</td>
<td>600</td>
</tr>
<tr>
<td>6</td>
<td>50.0</td>
<td>400</td>
</tr>
<tr>
<td>7</td>
<td>70.0</td>
<td>700</td>
</tr>
<tr>
<td>8</td>
<td>80.5</td>
<td>500</td>
</tr>
</tbody>
</table>
<script type="text/javascript">
/**
* 请完成 sortData 函数，根据参数的要求对表格所有行进行重新排序。
* 1、type为product、price或者sales，分别对应第1 ~ 3列
* 2、order为asc或者desc，asc表示升序，desc为降序
* 3、例如 sortData('price', 'asc') 表示按照price列从低到高排序
* 4、所有表格内容均为数字，每一列数字均不会重复
* 5、不要使用第三方插件
*/
function sortData(type, order) {
//完成您的代码 if(order == 'asc'){
data.sort( (a, b)=> a[type] - b[type] );
}else if(order == 'desc'){ data.sort( (a, b)=> b[type] - a[type] );
} //调用渲染视图
render(data); } //渲染视图 function render(data) {
let tbodyHTML = '';
for( let i = 0; i < data.length; i++ ){
tbodyHTML += ` <tr>
<td>${data[i].product}</td>
<td>${data[i].price}</td>
<td>${data[i].sales}</td>
</tr>`
} document.getElementById('jsList').innerHTML = tbodyHTML;
} //获取数据
let oTbody = document.getElementById('jsList');
let oTr = oTbody.getElementsByTagName('tr'); let data = []; for(let i = 0; i < oTr.length; i++){
data[i] = {
product: oTr[i].getElementsByTagName('td')[0].innerText,
price: oTr[i].getElementsByTagName('td')[1].innerText,
sales: oTr[i].getElementsByTagName('td')[2].innerText,
}
} /* 原数据格式
[
* {product: "1", price: "10.0", sales: "800"},
* {product: "2", price: "30.0", sales: "300"},
* {product: "3", price: "20.5", sales: "100"},
* {product: "4", price: "40.5", sales: "200"},
* {product: "5", price: "60.5", sales: "600"},
* {product: "6", price: "50.0", sales: "400"},
* {product: "7", price: "70.0", sales: "700"},
* {product: "8", price: "80.5", sales: "500"}
* ]
* */ //sortData('product', 'desc');
//调用排序函数
sortData('price','desc') //sortData('product', 'desc'); </script>
</body>
</html>
js中json对象数组按对象属性排序---1的更多相关文章
- js中json与数组字符串的相互转化
<SCRIPT LANGUAGE="JavaScript"> var t="{'firstName': 'cyra', 'lastName': 'richar ...
- JS中如何判断对象是对象还是数组
JS中如何判断对象是对象还是数组 一.总结 一句话总结:typeof Array.isArray === "function",Array.isArray(value)和Objec ...
- js 数组、对象转json 以及 json转 数组、对象
let jsonObj = $.parseJSON(jsonStr); //json字符串转化成json对象(jq方法) var jsonObj = JSON.parse(jsonStr); //js ...
- js中Json字符串如何转成Json对象(4种转换方式)
js中Json字符串如何转成Json对象(4种转换方式) 一.总结 一句话总结:原生方法(就是浏览器默认支持的方法) 浏览器支持的转换方式(Firefox,chrome,opera,safari,ie ...
- js中JSON的解析（将json字符串转化为对象）和序列化（将对象转化为json字符串）（函数的功能一般都挺全的，需要的时候去查看完整函数）
js中JSON的解析(将json字符串转化为对象)和序列化(将对象转化为json字符串)(函数的功能一般都挺全的,需要的时候去查看完整函数) 一.总结 1.JSON解析:JSON.parse(myJS ...
- js中 json对象与json字符串相互转换的几种方式
以下总结js中 json对象与json字符串相互转换的几种方式: 一.JSON对象转化为JSON字符串 1.使用JSON.stringify()方法进行转换 该方法不支持较老版本的IE浏览器,比如:i ...
- js中的伪数组
一, 伪数组 1. 具有length属性 2. 按索引方式存储数据 3. 不具有数组的方法, 比如push(),pop()等 二, 生成伪数组的方法 在js中生成伪数组的方法比较多 1. functi ...
- js课程 3-10 js中字符串函数数组函数和其它语言中对应函数的区别和联系是什么
js课程 3-10 js中字符串函数数组函数和其它语言中对应函数的区别和联系是什么 一.总结 一句话总结:js中是对象点方法的形式,这些方法都是对象的方法,而在php.java中却不是这样. 1.j ...
- Js中的数据属性和访问器属性
Js中的数据属性和访问器属性 在javaScript中,对象的属性分为两种类型:数据属性和访问器属性. 一.数据属性 1.数据属性:它包含的是一个数据值的位置,在这可以对数据值进行读写. 2.数据属性 ...
- js中json法创建对象（json里面的:相当于js里面的=）
js中json法创建对象(json里面的:相当于js里面的=) 一.总结 json里面的:相当于js里面的= 4.json创建js对象解决命名冲突:多个人为同一个页面写js的话,命名冲突就有可能发生, ...
随机推荐
- SFTP客户端代码示例
参考链接:SFTP客户端代码示例 操作系统:Windows7/8,VS2013 环境:libssh2 1.4.3.zlib-1.2.8.openssl-1.0.1g 原文: “从http://www. ...
- 不指定虚拟路径的前提下通过http访问pdf、图片等文件
通常我们通过http访问图片或者pdf的时候都是将文件上传到指定文件夹下面,然后通过配置虚拟路径来访问指定的资源. 在不配置虚拟路径的情况下,我们通过获取到response的outpurstream, ...
- Python对HDFS的一些基础操作
链接: http://www.cnblogs.com/shoufengwei/p/5949791.html
- SpringCloud Zuul（路由网关）
⒈Zuul是什么? Zuul包含了两个最主要的功能,对请求的路由和过滤.其中路由功能负责将外部请求转发到具体的微服务实例上,是实现外部访问统一入口的基础.过滤器功能则负责对请求的处理过程进行干预,是实 ...
- 【C++】一篇文章,让你不再害怕指针
在C++中,比较难以理解的就是指针,最常用的也是指针.这篇文章,结合我的所学,所看,来谈谈C++中的指针 指针是什么 指针是一个特殊的变量,指向内存中的一个地址.它具有四个要素: 指针类型:即指针本身 ...
- A Light CNN for Deep Face Representation with Noisy Labels
承接上一篇博客.该论文思路清晰,实验充分,这里大致写一些比较不错的idea.从标题就能看出本文的主要贡献:轻量.鲁棒.利用一个轻量CNN从大规模数据且含大量噪声中来学习一个深度面部表征. 直接谈谈贡献 ...
- VS code 配置C++编译环境
主要参考链接:https://blog.csdn.net/bat67/article/details/76095813 另外有如下几处需要注意的地方: (1) 这部需要提前“run build tas ...
- ARMV7-M数据手册---Part A ：Application Level Architecture---A1 Introduction
1.前言 本章主要介绍了ARMV7体系结构及其定义的属性,以及本手册定义的ARMV7M属性. 主要包括: ARMV7体系结构和属性 ARMV7M属性 ARMV7M扩展 2. ARMV7体系结构和属性 ...
- python实战===教你用微信每天给女朋友说晚安【转】
转自:https://www.cnblogs.com/botoo/p/8622379.html#4081184 但凡一件事,稍微有些重复.我就考虑怎么样用程序来实现它. 这里给各位程序员朋友分享如何每 ...
- planning深度剖析
planning深度剖析 结合find命令过滤目录及文件名后缀: find /home/hadoop/nisj/automationDemand/ -type f -name '*.py'|xargs ...