比较嵌套对象数组和返回值存在JavaScript, React

Question

嗨，我正试图从后端服务器获取我的数字到图表库，但这似乎几乎是不可能的。以下是我的代码，请帮助我。

const data = [
{ id: "americano",
data: [{x: "10",y: 10,}, {x: "11",y: 20,}, {x: "12",y: 40,}, {x: "13",y: 50,}, {x: 14,y:60,}],},
{ id: "latte",
data: [{x: "10",y: 10,}, {x: "11",y: 20,}, {x: "12",y: 40,}, {x: "13",y: 50,}, {x: 14,y:60,}],},
{ id: "espresso",
data: [{x: "10",y: 10,}, {x: "11",y: 20,}, {x: "12",y: 40,}, {x: "13",y: 50,}, {x: 14,y:60,}],},
]

我需要的库图表的任何x值丢失的数据，图表崩溃，所以我需要所有的值，然而问题是来自我们的后端服务器的数据，有不需要的所有数据。

const serverdata = [
{ "id": "latte",
"data": [{"x": "12", "y": 30}]},
{"id": "americano",
"data": [{"x": "10","y": 20},{ "x": "13","y": 10}]},
{"id": "espresso",
"data": [{"x": "10","y": 30},{ "x": "11","y": 10},{ "x": "12","y": 20}]},
]

从后端服务器获得的数据

这是我尝试过的

我尝试在数据

中输入以下值而不是y值

const returnExistingValues = (a) => {
for (let i = 0; i < data.length; i++) {
for (let j = 0; j < a.length; j++) {
for (let k = 0; k < data[i].data.length; k++) {
for (let l = 0; l < a[j].data.length; l++) {
if (
((data[i].menuName === a[j].menuName)) &&
((data[i].data[k].x === a[j].data[l].x))
) {
return a[j].data[l].y;
} else {
return 0;
}
}
}
}
}
};

例如

const data = [
{ id: "americano",
data: [{x: "10",y: returnExistingValues(serverdata),}
]
}
]

所有的returnExistingValues函数所做的是返回0的值:(有人能帮帮我吗?

下面是预期结果

const newData = [
{ id: "americano",
data: [{x: "10",y: 20,}, {x: "11",y: 0,}, {x: "12",y: 0,}, {x: "13",y: 10,}, {x: 14,y:0,}],},
{ id: "latte",
data: [{x: "10",y: 0,}, {x: "11",y: 0,}, {x: "12",y: 30,}, {x: "13",y: 0,}, {x: 14,y:0,}],},
{ id: "espresso",
data: [{x: "10",y: 0,}, {x: "11",y: 30,}, {x: "12",y: 10,}, {x: "13",y: 20,}, {x: 14,y:0,}],},
]

Answer 1

一切皆有可能!下面是我的解决方案:

const serverdata = [
{ "id": "latte",
"data": [{"x": "12", "y": 30}]},
{"id": "americano",
"data": [{"x": "10","y": 20},{ "x": "13","y": 10}]},
{"id": "espresso",
"data": [{"x": "10","y": 30},{ "x": "11","y": 10},{ "x": "12","y": 20}]},
]

function fillEmptyData(serverdata){
//Calculate min and max x value from all values
let max = 0;
let min = Number.MAX_SAFE_INTEGER;
Object.entries(serverdata).forEach(([key, value]) => {
for (const item of value.data) { 
max = item.x > max ? item.x : max;
min = item.x < min ? item.x : min;
}
});
//Now insert all the values in the new array
let newarr = serverdata;
Object.entries(serverdata).forEach(([key, value]) => {
for(let i = min; i < max; i++){
//Insert missing values
newarr[key].data[i-min] = newarr[key].data[i] ?? {x:i, y:0};
}
});
return newarr;
}
console.log(fillEmptyData(serverdata))