javascript将ajax返回的对象数组按照类别字段分组判断是否存在,传递echarts进行图表渲染

简介: javascript将ajax返回的对象数组按照类别字段分组判断是否存在,传递echarts进行图表渲染

数组分组

  //设备数据分组
                var device = res.device;
                //传感器设备的图表;
                var t = [];
                for (var j = 0; j < res.device.length; j++) {
                    //数据按照imei过滤分组;
                    t[j] = filterArr(res.data, device[j].imei);
                    //防止新添加设备无数据导致的显示异常;
                    if (t[j] == "") {
                        t[j] = [{"id": device[j].id,"value": "0","time": "2020-01-01 00:00:00","imei": device[j].imei}];
                    }
 }


对象数组过滤

//根据设备imei筛选数据;
function filterArr(arr, imei) {
    return arr.filter(item => item.imei == imei);
}

Done!

相关文章
|
JavaScript 前端开发 容器
AJAX载入外部JS文件到页面并让其执行的方法(附源码)
AJAX载入外部JS文件到页面并让其执行的方法(附源码)
192 0
|
数据采集 前端开发 JavaScript
虎扑APP数据采集:JavaScript与AJAX的结合使用
虎扑APP数据采集:JavaScript与AJAX的结合使用
|
移动开发 前端开发 JavaScript
js之ajax |12-6
js之ajax |12-6
|
XML 前端开发 JavaScript
JavaScript进阶 - AJAX请求与Fetch API
【7月更文挑战第3天】前端开发中的异步基石:AJAX与Fetch。AJAX,使用XMLHttpRequest,处理跨域、回调地狱和错误处理。Fetch,基于Promise,简化请求,但需注意默认无跨域头和HTTP错误处理。两者各有优劣,理解其问题与解决策略,能提升前端应用的性能和用户体验。
517 24
|
JavaScript 前端开发 安全
安全开发-JS应用&原生开发&JQuery库&Ajax技术&加密编码库&断点调试&逆向分析&元素属性操作
安全开发-JS应用&原生开发&JQuery库&Ajax技术&加密编码库&断点调试&逆向分析&元素属性操作
251 5
|
JavaScript 前端开发 网络协议
|
JavaScript 前端开发 安全
js之AJAX
js之AJAX
183 0
|
XML JSON 前端开发
学习Ajax使用异步对象发送请求
Ajax,全称Asynchronous JavaScript and XML(异步JavaScript和XML),是一种用于创建更好、更快以及交互性更强的Web应用程序的技术。
183 3
|
XML 前端开发 JavaScript
JavaScript进阶 - AJAX请求与Fetch API
【7月更文挑战第9天】JavaScript进阶:AJAX与Fetch API对比。AJAX用于异步数据交换,XMLHttpRequest API复杂,依赖回调。Fetch API是现代、基于Promise的解决方案,简化请求处理。示例:`fetch(&#39;url&#39;).then(r =&gt; r.json()).then(data =&gt; console.log(data)).catch(err =&gt; console.error(err))`。注意点包括检查HTTP状态、错误处理、CORS、Cookie和超时。Fetch提高了异步代码的可读性,但需留意潜在问题。
418 0
|
前端开发 JavaScript API
js【详解】ajax (含XMLHttpRequest、 同源策略、跨域、JSONP)
js【详解】ajax (含XMLHttpRequest、 同源策略、跨域、JSONP)
451 0