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;
}
}
}
}
}
Done！