在浏览器中绘制数据图形

Question

一点背景。我有一个Spring项目设置来做一些网络抓取，我想用图形显示一些数据。该服务已设置并返回我正在构建的网页的模型和视图。

我对解决这个问题的不同方法持开放态度，但这是我的第一个方法。

我使用Spring将所有数据放入返回的网页中，并考虑将其过滤到不同的视图中(而不是多次提供数据(。

我遇到的问题是spring返回了一个表示实体的JSON对象列表。

const allData = [{ "name": "oxygen", "orderId": "1", "price": 1.1, "available": 1, "remaining": 1, "room": "E1W1", "date": "2021-06-10T00:00:00.000+01:00", "orderType": "BUY", "shard": "SHARD_0" },
{ "name": "silicon", "orderId": "2", "price": 2.2, "available": 2, "remaining": 2, "room": "N1E2", "date": "2021-06-10T00:00:00.000+01:00", "orderType": "SELL", "shard": "SHARD_2" }];

我决定尝试使用的图表是https://developers.google.com/chart/interactive/docs/basic_load_libs它正在寻找形式的数据

const toBe = [
['Date', 'Price'],
['2004', 1000],
['2005', 1170],
['2006', 660],
['2007', 1030]
];

我的第一种方法是使用这两个函数进行转换，但它会导致我的浏览器崩溃(内存不足，我做得很好(。

// Json object to array
function objectToArray(obj) {
const keys = Object.keys(obj);
const res = keys;
for (let i = 0; i < keys.length; i++) {
res.push(obj[keys[i]]);
};
return res;
};
// Converts List of Json to array of arrays.
function listToGraphData(obj) {
let res;
res.push(Object.keys(obj[0]));
for (let i = 0; i < obj.length; i++) {
res.push(objectToArray(obj[i]));
}
return res;
}

如何修复我的javascript或找到更好的解决方案？

Answer 1

函数objectToArray永远不会结束，浏览器将崩溃：

function objectToArray(obj) {
const keys = Object.keys(obj);
const res = keys;
for (let i = 0; i < keys.length; i++) {
res.push(obj[keys[i]]);
};
return res;
};

试试这个：

function objectToArray(obj) {  
const res = Object.keys(obj).map((key) => {
return obj[key];
});

return res;
};

或者简单地说：

function objectToArray(obj) {  
const res = Object.values(obj);

return res;
};

并且函数listToGraphData不应该工作，因为这两行不工作：

let res;
res.push(Object.keys(obj[0])); // Undefined can't push

res未定义，不能有push方法。

Answer 2

感谢@Sega的帮助。我终于把它写成

function objectToArray( obj)  {
// const keys = Object.keys(obj);
const res = Object.values(obj);
return res;
};
function listToGraphData(obj){
let res=[Object.keys(obj[0])]; // Needed to make keys an array.
for(let i=0; i<obj.length; i++){
res.push(objectToArray(obj[i]));
}
return res;
}