javascript对象数据合并实现补齐24小时时间段同时赋值0的解决方案

简介: javascript对象数据合并实现补齐24小时时间段同时赋值0的解决方案

在php对接echarts生成24小时数据时,发现某些时段在数据库中是不存在的,这样就导致前端Echarts的X轴会出现时间段的跳跃。

如后台生成的数据JSON如下:

var arr = [
        {
            "dataKey": "00",
            "totalTrans": "4",
            "totalPays": "301.70"
        },
        {
            "dataKey": "01",
            "totalTrans": "1",
            "totalPays": "39.90"
        },
        {
            "dataKey": "03",
            "totalTrans": "2",
            "totalPays": "35.80"
        },
        {
            "dataKey": "05",
            "totalTrans": "3",
            "totalPays": "80.80"
        },
        {
            "dataKey": "06",
            "totalTrans": "9",
            "totalPays": "423.90"
        },
        {
            "dataKey": "07",
            "totalTrans": "38",
            "totalPays": "1925.69"
        },
        {
            "dataKey": "08",
            "totalTrans": "91",
            "totalPays": "4324.88"
        },
        {
            "dataKey": "09",
            "totalTrans": "119",
            "totalPays": "6423.51"
        },
        {
            "dataKey": "10",
            "totalTrans": "128",
            "totalPays": "9273.93"
        },
        {
            "dataKey": "11",
            "totalTrans": "123",
            "totalPays": "6563.52"
        },
        {
            "dataKey": "12",
            "totalTrans": "81",
            "totalPays": "4116.21"
        },
        {
            "dataKey": "13",
            "totalTrans": "58",
            "totalPays": "2704.50"
        },
        {
            "dataKey": "14",
            "totalTrans": "77",
            "totalPays": "6561.20"
        },
        {
            "dataKey": "15",
            "totalTrans": "27",
            "totalPays": "1252.20"
        }
    ];

02时间,04时间…都是空值,需要如何处理呢?


24小时完整时间点

按照数据格式,在JS钟,提前做好24小时默认数据。

    //24小时默认数据,补齐缺失数据;
    var timeData = [
        {"dataKey": '00', "totalTrans": "0", "totalPays": "0"},
        {"dataKey": '01', "totalTrans": "0", "totalPays": "0"},
        {"dataKey": '02', "totalTrans": "0", "totalPays": "0"},
        {"dataKey": '03', "totalTrans": "0", "totalPays": "0"},
        {"dataKey": '04', "totalTrans": "0", "totalPays": "0"},
        {"dataKey": '05', "totalTrans": "0", "totalPays": "0"},
        {"dataKey": '06', "totalTrans": "0", "totalPays": "0"},
        {"dataKey": '07', "totalTrans": "0", "totalPays": "0"},
        {"dataKey": '08', "totalTrans": "0", "totalPays": "0"},
        {"dataKey": '09', "totalTrans": "0", "totalPays": "0"},
        {"dataKey": '10', "totalTrans": "0", "totalPays": "0"},
        {"dataKey": '11', "totalTrans": "0", "totalPays": "0"},
        {"dataKey": '12', "totalTrans": "0", "totalPays": "0"},
        {"dataKey": '13', "totalTrans": "0", "totalPays": "0"},
        {"dataKey": '14', "totalTrans": "0", "totalPays": "0"},
        {"dataKey": '15', "totalTrans": "0", "totalPays": "0"},
        {"dataKey": '16', "totalTrans": "0", "totalPays": "0"},
        {"dataKey": '17', "totalTrans": "0", "totalPays": "0"},
        {"dataKey": '18', "totalTrans": "0", "totalPays": "0"},
        {"dataKey": '19', "totalTrans": "0", "totalPays": "0"},
        {"dataKey": '20', "totalTrans": "0", "totalPays": "0"},
        {"dataKey": '21', "totalTrans": "0", "totalPays": "0"},
        {"dataKey": '22', "totalTrans": "0", "totalPays": "0"},
        {"dataKey": '23', "totalTrans": "0", "totalPays": "0"}
    ];


合并两个对象数组

//合并数据成为新的数组;
    var arr2 = timeData.concat(arr);

结果如下:



执行对象数组的合并

直接合并的数据,存在大量的重复值,不是目标数据,需要对数据按照dataKey进行合并,其他字段相加。

    //定义新的对象和数据;
    var map = {}, dest1 = [], dest2 = [];
    //执行函数合并;
    getNewArr(arr2, dest1);
    console.log(dest1);
    //对象数组,同键值合并函数;
    function getNewArr(arr, dest) {
        for (var i = 0; i < arr.length; i++) {
            var ai = arr[i];
            if (!map[ai.dataKey]) {
                dest.push({
                    dataKey: ai.dataKey,
                    totalTrans: ai.totalTrans,
                    totalPays: ai.totalPays
                });
                map[ai.dataKey] = ai;
            } else {
                for (var j = 0; j < dest.length; j++) {
                    var dj = dest[j];
                    if (dj.dataKey == ai.dataKey) {
                        dj.totalTrans = (parseFloat(dj.totalTrans) + parseFloat(ai.totalTrans)).toString();
                        dj.totalPays = (parseFloat(dj.totalPays) + parseFloat(ai.totalPays)).toString();
                        break;
                    }
                }
            }
        }
    }



20200803192144998.png


Done!

相关文章
|
30天前
|
JavaScript 前端开发
JS浮点数精度问题及高精度小数运算:BigNumber解决方案
JS浮点数精度问题及高精度小数运算:BigNumber解决方案
121 0
|
8天前
|
JavaScript 前端开发
如何在 JavaScript 中使用 __proto__ 实现对象的继承?
使用`__proto__`实现对象继承时需要注意原型链的完整性和属性方法的正确继承,避免出现意外的行为和错误。同时,在现代JavaScript中,也可以使用`class`和`extends`关键字来实现更简洁和直观的继承语法,但理解基于`__proto__`的继承方式对于深入理解JavaScript的面向对象编程和原型链机制仍然具有重要意义。
|
12天前
|
Web App开发 JavaScript 前端开发
如何确保 Math 对象的方法在不同的 JavaScript 环境中具有一致的精度?
【10月更文挑战第29天】通过遵循标准和最佳实践、采用固定精度计算、进行全面的测试与验证、避免隐式类型转换以及持续关注和更新等方法,可以在很大程度上确保Math对象的方法在不同的JavaScript环境中具有一致的精度,从而提高代码的可靠性和可移植性。
|
30天前
|
小程序 JavaScript 前端开发
uni-app开发微信小程序:四大解决方案,轻松应对主包与vendor.js过大打包难题
uni-app开发微信小程序:四大解决方案,轻松应对主包与vendor.js过大打包难题
504 1
|
11天前
|
前端开发 JavaScript 开发者
除了 Generator 函数,还有哪些 JavaScript 异步编程解决方案?
【10月更文挑战第30天】开发者可以根据具体的项目情况选择合适的方式来处理异步操作,以实现高效、可读和易于维护的代码。
|
12天前
|
JavaScript 前端开发 图形学
JavaScript 中 Math 对象常用方法
【10月更文挑战第29天】JavaScript中的Math对象提供了丰富多样的数学方法,涵盖了基本数学运算、幂运算、开方、随机数生成、极值获取以及三角函数等多个方面,为各种数学相关的计算和处理提供了强大的支持,是JavaScript编程中不可或缺的一部分。
|
16天前
|
数据采集 存储 JavaScript
如何使用Puppeteer和Node.js爬取大学招生数据:入门指南
本文介绍了如何使用Puppeteer和Node.js爬取大学招生数据,并通过代理IP提升爬取的稳定性和效率。Puppeteer作为一个强大的Node.js库,能够模拟真实浏览器访问,支持JavaScript渲染,适合复杂的爬取任务。文章详细讲解了安装Puppeteer、配置代理IP、实现爬虫代码的步骤,并提供了代码示例。此外,还给出了注意事项和优化建议,帮助读者高效地抓取和分析招生数据。
如何使用Puppeteer和Node.js爬取大学招生数据:入门指南
|
1月前
|
前端开发 JavaScript 开发者
JS 异步解决方案的发展历程以及优缺点
本文介绍了JS异步解决方案的发展历程,从回调函数到Promise,再到Async/Await,每种方案的优缺点及应用场景,帮助开发者更好地理解和选择合适的异步处理方式。
|
1月前
|
缓存 JavaScript 前端开发
JavaScript中数组、对象等循环遍历的常用方法介绍(二)
JavaScript中数组、对象等循环遍历的常用方法介绍(二)
31 1
|
30天前
|
JavaScript 前端开发 大数据
在JavaScript中,Object.assign()方法或展开语法(...)来合并对象,Object.freeze()方法来冻结对象,防止对象被修改
在JavaScript中,Object.assign()方法或展开语法(...)来合并对象,Object.freeze()方法来冻结对象,防止对象被修改
15 0