将JSON对象转换为二维数组(热图)

时间:2019-01-09 08:12:10

标签: javascript json

我在JSON对象中具有以下形式的数据(错误是错误代码,每个数字都替换一个特定的错误消息):

var obj = [{
    "timestamp": "2018-12-16 16:04:31.000000000",
    "error": "8022"
  },
  {
    "timestamp": "2018-12-16 16:04:41.000000000",
    "error": "8022"
  },
  {
    "timestamp": "2018-12-16 16:04:51.000000000",
    "error": "8008"
  },
  {
    "timestamp": "2018-12-16 16:05:02.000000000",
    "error": "3005"
  }, ...]

现在,我想绘制一个热图图:

enter image description here

x轴为时间戳轴,y轴为分类错误代码。

因此,热图数组应该看起来像(这里的轴是x = time和y = error代码,数字是发生的错误的总和)。

[[0, 0, 1, 2, 0, 0, ... ],
 [1, 0, 0, 0, 0, 0, ... ],
 [0, 1, 2, 3, 0, 0,  ...],
  ...]

x轴(水平):jsonobj中所有发生的时间戳

y轴(垂直):jsonobj中所有发生的错误代码

但是,我无法弄清楚如何准备数据以获取所需的热图(2d)阵列。我尝试使用map和reduce函数重新排列JSON对象,但这并没有使我接近热图数组。

这是我尝试过的:

var o = jsonobj.reduce( function (acc, curr) {
    acc[curr.error] = acc[curr.error] || [];
    acc[curr.error].push({[curr.timestamp]:1});
    return acc;
}, {});
console.log(o);
var a = Object.keys(o).map(function(k) {
    return {error: k, timestamp: Object.assign.apply({}, o[k])};
});
console.log(a)

现在,我有一个数组,其中包含发生错误的时间戳记timestamp:1,但没有包含没有发生错误的timestamp:0(但时间戳记出现在数据中的其他位置,并带有其他错误)。

长期目标是使用plotly.js为热图创建所需的z矩阵。

1 个答案:

答案 0 :(得分:1)

以下代码段应执行此操作并创建2d数组:

console.log('Start');

jsonobj = [
{
    'timestamp': '2018-12-16 16:04:41.000000000',
    'error': '8022'
},
{
    'timestamp': '2018-12-16 16:04:41.000000000',
    'error': '8022'
},
{
    'timestamp': '2018-12-16 16:04:51.000000000',
    'error': '8008'
},
{
    'timestamp': '2018-12-16 16:05:02.000000000',
    'error': '3005'
}
]

console.log('JSON Array');
console.log(jsonobj);

var errorTimestampMap = jsonobj.reduce(function (acc, curr) {
    if (acc[curr.error + curr.timestamp]) {
        acc[curr.error + curr.timestamp] += 1;
    } else {
        acc[curr.error + curr.timestamp] = 1
    }
    return acc;
}, {});

console.log('Error Code/Timestamp Map');
console.log(errorTimestampMap);


var uniqueErrors = jsonobj.map(function (err) {
    return err.error;
}).filter(function (value, index, array) {
    return index == array.indexOf(value);
});

console.log('Array with unique error codes');
console.log(uniqueErrors);

var uniqueTimestamps = jsonobj.map(function (err) {
    return err.timestamp;
}).filter(function (value, index, array) {
    return index == array.indexOf(value);
});

console.log('Array with unique timestamps');
console.log(uniqueTimestamps);


var matrix = []

for (let i = 0; i < uniqueErrors.length; i++) {
    matrix.push(new Array(uniqueTimestamps.length).fill(0));

    for (let k = 0; k < uniqueTimestamps.length; k++) {
        if (errorTimestampMap[uniqueErrors[i] + uniqueTimestamps[k]]) {
            //console.log(errorTimestampMap[uniqueErrors[i] +     uniqueTimestamps[k]]);
           matrix[i][k] = errorTimestampMap[uniqueErrors[i] + uniqueTimestamps[k]];
        }
    }
}
console.log('Matrix');
console.log(matrix);