-
js对接口返回的数据排序(对JOSN 数据指定属性排序,对二维数组元素指定字段排序)
2020-03-09 20:20:06排序前数据展示是这样的: ...datas 参数是通过ajax获取的结果,通过这种方式对想要排序的规则添加一个键值对 ,然后对以sot 进行排序就好了: 代码: addSort : function(datas){ for (var i = 0; i <...排序前数据展示是这样的:
甲方的需求是想要以“单位名称”指定的顺序进行展示:.想要通过这种没有规律的字段(单位名称)进行展示是不可能的,那就转换一下:
datas 参数是通过ajax获取的结果,通过这种方式对想要排序的规则添加一个键值对 ,然后对以sot 进行排序就好了:
代码:addSort : function(datas){ for (var i = 0; i <datas.length; i++) { switch (datas[i]['单位名称']) { case '': datas[i]['sot']=0; break; case '': datas[i]['sot']=1; break; case '': datas[i]['sot']=2; break; case '': datas[i]['sot']=3; break; case '': datas[i]['sot']=4; break; } } return datas; },
- 通过步骤① 返回的是一个对象类型的数组:
- 接着就是对数组进行一下排序就可以了:注意 内层 for 循环 的取值范围
代码:
sortDatas : function(lists){ for(var j = 0 ; j < lists.length; j++){ for(var k = 0 ; k < lists.length-1-j ; k++){ if (lists[k].sot > lists[k+1].sot){ var temp =lists[k]; lists[k] = lists[k + 1]; lists[k + 1] = temp; } } } return lists; }
然后进行调用:
结果:
-
JavaScript对JSON数据进行排序和搜索
2021-01-19 20:35:07在使用AJAX获取数据时后台返回的大部分都是json数据,在进行程序开发时有时会需要直接对这些json数据在js程序中再进行一定的操作,如排序、搜索等,而不是通过AJAX请求由数据库进行这些操作。 今天我就教给大家如何... -
对json数据进行排序和搜索
2017-07-23 22:53:36对json数据进行排序和搜索在使用AJAX获取数据时后台返回的大部分都是json数据,在进行程序开发时有时会需要直接对这些json数据在js程序中再进行一定的操作,如排序、搜索等,而不是通过AJAX请求由数据库进行这些操作...对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 “这是第一个数据” -
pysoc.js:简单的gsoc数据抓取工具,搜索任何关键字并立即获取与您的搜索条件相匹配的组织的数据,使用过滤...
2021-02-05 08:47:02使用FILTERS对数据进行排序和分析,可让您根据number of selections的number of selections对数据进行排序。 通过添加多个搜索参数来执行复杂搜索查询。 添加了模糊逻辑进行搜索,以防搜索参数不匹配! 建议最匹配的... -
JS 根据对象的属性值进行排序
2020-05-20 11:01:46遇到了个bug,从后端拿到数据(对象且无序),需要图表x轴展示该数据值a。调用Object.values(),自动排好了序,刚开始...在对整数型数组进行排序时,不建议利用for…in的迭代顺序。因为如果涉及到增删改节点的话,使用for遇到了个bug,从后端拿到数据(对象且无序),需要图表x轴展示该数据值a。调用Object.values(),自动排好了序,刚开始没在意,测试的时候就出问题 了…于是就自己重新写了个排序,就记录一下~
Object.values():获取属性值,返回的是一个数组,用该方法获取的属性值有跟for…in一样的迭代顺序。其中for…in的迭代顺序跟执行环境有关系,并不是固定的按照某种(比如从大到小)方式来排序的。
在对整数型数组进行排序时,不建议利用for…in的迭代顺序。因为如果涉及到增删改节点的话,使用for …in不一定能访问的到操作前后的值,有可能会被忽略。
Object.keys():获取属性,迭代顺序跟for一致(根据index来排序)。
var myobj = { a: 99, b: 67, c: 48, d: 67, w: 34, f: 34, j: 56, s: 54 }; // 获取属性值并按从大到小排序 let result = Object.values(myobj).sort((a, b) => { return b - a; }); var new_obj = {}; for (let i = 0; i < result.length; i++) { // 将原对象中的键值对按照属性值的排序顺序写入新对象 Object.keys(myobj).map((item, index) => { if (myobj[item] === result[i]) { new_obj[item] = result[i]; } }); } console.log(new_obj);
运行结果:
-
js对map排序,后端返回有序的LinkedHashMap类型时前端获取后顺序依旧从小到大的解决方法
2020-10-17 15:23:57在后端进行时间倒序查询后,返回map类型的数据,在postman获取是这样: [ { "2020": [ { "id": 39, "createTime": "2020-10-15T22:29:20.016", "year": 2020, "monthDay": "10-15", "title":在后端进行时间倒序查询后,返回map类型的数据,在postman获取是这样:
[ { "2020": [ { "id": 39, "createTime": "2020-10-15T22:29:20.016", "year": 2020, "monthDay": "10-15", "title": "java数据结构61:冒泡排序" }, { "id": 37, "createTime": "2020-10-14T11:44:12.163", "year": 2020, "monthDay": "10-14", "title": "这是博客标题13" } ], "2019": [ { "id": 28, "createTime": "2019-10-15T18:57:41.409", "year": 2019, "monthDay": "10-15", "title": "这是博客标题5" }, { "id": 27, "createTime": "2019-10-15T18:57:38.442", "year": 2019, "monthDay": "10-15", "title": "这是博客标题4" }, { "id": 26, "createTime": "2019-10-15T18:57:36.086", "year": 2019, "monthDay": "10-15", "title": "这是博客标题3" } ], "2018": [ { "id": 25, "createTime": "2018-10-15T18:57:31.986", "year": 2018, "monthDay": "10-15", "title": "这是博客标题2" }, { "id": 24, "createTime": "2018-10-15T18:57:27.428", "year": 2018, "monthDay": "10-15", "title": "这是博客标题1" } ], "2017": [ { "id": 12, "createTime": "2017-10-14T11:44:12.163", "year": 2017, "monthDay": "10-14", "title": "### 锟桑的第一篇博客" } ] } ]
浏览器获取结果变成了:
所以后端就算进行了排序处理,但是浏览器还是有自己的想法,在这里就要进行前端处理了:
//先把获取到的json对象转成map let map = new Map(); //archive就是接口返回的json对象 for (let year in archive) { map.set(year,archive[year]); } //把map转换为array就可以排序了 let arr = Array.from(map); arr.sort(function (a,b) { //map转成array后,下标0为key,下标1为value //这里根据年份进行倒序排序 return b[0]-a[0]; }); console.log(arr)
可以从打印信息看出来已经正确排序了:
虽然解决了问题,但是这无疑会增加前端的工作量,所以推荐的做法是,在后端再定定义个类,比如:
public class ArchivePlusVo { private String year; private List<ArchiveVo> list; }
然后把要返回的Map对象转换成List<ArchivePlusVo>再返回就好了。
-
JS中json数组多字段排序方法(解决兼容性问题)
2018-07-17 09:43:46最近项目遇到一个需求,前台获取到一个json数组,用户需要动态的根据自己的选择来对json数据进行排序。 由于后台表设计问题所以不能用sql进行排序,这里用到了js的sort方法。 如果对单字段排序,那么很简单,一个... -
【数据结构与算法】简单排序(冒泡排序、选择排序、插入排序)完整思路,并用代码封装排序函数
2020-10-12 10:20:28【数据结构与算法】简单排序(冒泡排序、选择...之前的文章,我已经把前端需要了解的数据结构都给说了一边,并且我们也都对其进行了封装。现在我们要开始对排序算法部分进行讲解,排序算法顾名思义,就是对一堆杂乱无.. -
js数据结构之列表的详细实现方法
2018-06-19 19:34:00* 列表用于存放数据量较少的数据结构* 当数据量较大时,不需要对其进行查找、排序的情况下,使用列表也比较方便。 本数据结构在node环境下运行,需要对node有个基本是了解。 1. listSize:列表长度 2. pos 当前... -
js排序问题! 如何过滤不需要的tr
2015-07-02 10:10:36//判断最后一次排序的列是否与现在要进行排序的列相同,是的话,直接使用reverse()逆序 if (oTable.sortCol == iCol) { aTRs.reverse(); } else { //使用数组的sort方法,传进排序函数 aTRs.sort... -
js关于数组排序问题 arr.sort(function(){});
2018-03-08 20:15:11应用场景:从后端获取到数组数据时可能需要按数组的某个字段进行重新排序,或者在用户点击某个按钮后把已经得到的数据进行从高到低或者从低到高的进行重新排序。注意事项:1、参数必须是函数。2、是对数组的引用,... -
datables后端分页后,如何进行排序功能的实现
2020-12-29 00:53:38, //设置用于对服务器端处理或Ajax源数据进行Ajax调用的HTTP方法。 //"data": param, //传递参数方式 //"fnServerData": retrieveData, //执行函数 "fnDrawCallback" : function(o... -
页面新增,上增,删除,自动更新排序js
2020-06-02 15:44:11/*当进行新增和上增时,对数据项序号,进行自动排序*/ function fileNmSort() { /*获取模块下的子元素tr数量,按顺序进行fileNum赋值*/ var trFileNmArry = new Array(); var tr =$("#editTable tr"); var ... -
-
了不起的Node.js+源码
2018-10-04 15:02:15用fs进行文件操作. .............................. 55 对CLI一探究竟. .................................................56 argv.................................................... 57 工作目录................ -
4.29 汉字转英文 遍历数组/对象 冒泡排序 面向对象构建类 遍历对象无序问题
2019-04-30 10:18:311、通过线上接口获取的数据并不是自己想要的排序状态。 需求分析: 数据LIST按歌手的名字的首字母来排序。 实现思路:js-pinyin 对数据进行聚合,并增加字段Findex,完成所需数组的创建。 先npm i js-pinyin -S 核心... -
reviewer-app:这是一个Restaurant Reviewer应用程序,它使用Angular 2来构建前端,使用Node.js中的REST ...
2021-02-03 13:34:42数据库仅存储评论,通过对Yelp进行API调用实时加载餐厅数据。 已定义API路线以搜索餐厅,获取特定餐厅的详细信息。 这些API不会与数据库交互。 GET,POST,DELETE审查的API路由与Yelp API以及数据库进行交互。 ... -
-
JS组件Bootstrap Table使用方法详解
2018-04-27 20:01:14bootStrap table 是一个轻量级的table插件,使用AJAX获取JSON格式的数据,其分页和数据填充很方便,支持国际化 三、使用方法 1、引入js、css [js] view plain copy <!--css样式--> <link href="css/... -
vue/js 实现仿通讯录-列表滑动字母索引
2019-09-03 16:26:19最近写东西刚好遇到如下设计: ...从country.json获取countryList数据 提取侧边栏字母并排序 将countryList按照字母分类排序 对侧边栏进行操作 不废话直接上代码 代码有一丢丢长,如果看不下去可以直接 ... -
精通JS脚本之ExtJS框架.part2.rar
2013-03-02 13:31:1913.4.2 对数据进行排序 13.4.3 从store 中获取数据 13.4.4 更新store 中的数据 13.4.5 加载及显示数据 13.5 数据代理 13.5.1 Ext.data.DataProxy 13.5.2 Ext.data.MemoryProxy 13.5.3 Ext.data.HttpProxy ... -
js正则匹配小数点后2位_前端实用正则表达式&小技巧,一股脑全丢给你
2021-01-04 01:50:00充分利用JavaScript自带原生方法解决问题前端页面和数据处理虽然看起来简单,但是一个优秀的前端工程师对于细节的把控也是至关重要的,如何合理处理业务也体现前端工程师对性能优化的功力获取数组最大值和最小值利用... -
-
-
-
-
js如何在当前函数中执行另一个函数,并等待另一个函数执行结束。
2020-07-14 16:18:33//先用Object内置类的keys方法获取要排序对象的属性名,再利用Array原型上的sort方法对获取的属性名进行排序,newkey是一个数组 var newObj = {}; //创建一个新的对象,用于存放排好序的键值对 for (var i = 0;... -
-
a的b次幂
-
Windows10蓝牙驱动合集
-
自动化测试Python3+Selenium3+Unittest
-
BNUZ计科一班作业第七题,负数进制
-
libFuzzer视频教程
-
【爱码农】C#制作MDI文本编辑器
-
linux系统下文件夹没有权限
-
2021年 系统分析师 系列课
-
js日期格式化yyyy-MM-dd
-
实验一.exe,,。。。
-
CentOS7安装Python3环境(无需修复yum命令)
-
【C++】迭代器
-
UVA839 天平 Not so Mobile
-
MHA 高可用 MySQL 架构与 Altas 读写分离
-
弘阳地产高管再变动:曾俊凯进、张良等人退,对千亿规模避而不提
-
MySQL 多平台多模式(安装、配置和连接 详解)
-
access应用的3个开发实例
-
2014年重庆理工大学《ERP原理及应用I》两套期末考试试卷.pdf
-
GDPR专题文档.zip
-
转行做IT-第15章 Collection、泛型、Iterator