如何在javascript/typescript中创建基于另一个数组的动态数组?



我想创建一个数组来遍历第一个数组的一个参数(在本例中,所需的参数是DT),并检查我们是否在这些日期有不同应用程序的数据。如果我们有它,它会把它的值(在第二个数组中),如果我们没有它,它会把0。

我所做的也是使用const pluck = (arr, key) => arr.map(i => i[key]);,我获得了所需的字段日期(但它们有重复的值)。为了删除重复的值,我使用dates = [...new Set(dates)];,最后循环最终值,并编写了一系列代码,但我没有得到我想要的(预期数组在下面)。

first_array = [
{
DT: "2022-01-01",
APP: "Application 1",
SPEED: 1547,
},
{
DT: "2022-01-01",
APP: "Application 2",
SPEED: 685,
},
{
DT: "2022-01-02",
APP: "Application 1",
SPEED: 500,
},
{
DT: "2022-01-02",
APP: "Application 2",
SPEED: 300,
},
{
DT: "2022-01-02",
APP: "Application 3",
SPEED: 600,
},
{
DT: "2022-01-03",
APP: "Application 1",
SPEED: 1000,
},
]

将数组:

desire_array = [
{
Name: "Application1",
Values: [1547, 500, 1000],
ValuesWithDate: [{x: '2022-01-01', y: 1547}, {x: '2022-01-02', y: 500}, {x: '2022-01-03', y: 1000}],
},
{
Name: "Application2",
Values: [685, 300, 0],
ValuesWithDate: [{x: '2022-01-01', y: 685}, {x: '2022-01-02', y: 300}, {x: '2022-01-03', y: 0}],
},
{
Name: "Application3",
Values: [0, 600, 0],
ValuesWithDate: [{x: '2022-01-01', y: 0}, {x: '2022-01-02', y: 600}, {x: '2022-01-03', y: 0}],
},
]

我需要这样做的原因是创建一个系列,我可以使用ApexCharts来显示图表。

实际数据也可以从这个api显示为JSON。

你可以这样做:

const first = [{DT: '2022-01-01',APP: 'Application 1',SPEED: 1547,},{DT: '2022-01-01',APP: 'Application 2',SPEED: 685,},{DT: '2022-01-02',APP: 'Application 1',SPEED: 500,},{DT: '2022-01-02',APP: 'Application 2',SPEED: 300,},{DT: '2022-01-02',APP: 'Application 3',SPEED: 600,},{DT: '2022-01-03',APP: 'Application 1',SPEED: 1000,}]
const dates = [...new Set(first.map(({ DT }) => DT))]
const apps = [...new Set(first.map(({ APP }) => APP))]
const result = apps.reduce((acc, app) => {
const appData = Object.assign(
{},
{
Name: app.replace(/ /, ''),
Values: [],
ValuesWithDate: [],
}
)
dates.forEach((date) => {
const data = first.find(({ DT, APP }) => DT === date && APP === app)
appData.ValuesWithDate.push({ x: date, y: data ? data.SPEED : 0 })
appData.Values.push(data ? data.SPEED : 0)
})
acc.push(appData)
return acc
}, [])
console.log(result)

你可以尝试这样做:

const convertArray = (arr) => arr.reduce((prev, current) => {
const existingIndex = prev.findIndex((p) => p.Name === current.APP);
if (existingIndex > -1) {
const currentApp = prev[existingIndex];
currentApp.Values.push(current.SPEED);
currentApp.ValuesWithDate.push({x: current.DT, y: current.SPEED});
prev[existingIndex] = currentApp;
} else {
prev.push({Name: current.APP, Values: [current.SPEED], ValuesWithDate:[{x: current.DT, y: current.SPEED}]})
}
return prev;
}, []);

并像这样使用:

const desire_array = convertArray(first_array)
const convert = (dates, data) => {
return Object.values(data.reduce((acc, curr) => {
if (!acc[curr.APP]) {
acc[curr.APP] = {
name: curr.APP,
valuesWithDate: []
};
}
acc[curr.APP].valuesWithDate.push({
x: curr.DT,
y: curr.SPEED
});
return acc;
}, {})).map((dataWithoutGaps) => {
const valuesWithDate = [...new Set(dates)].map(date => {
const el = dataWithoutGaps.valuesWithDate.find(e => e.x === date);
return {
x: date,
y: el ? el.y : 0
};
});
return {
ValuesWithDate: valuesWithDate,
Values: valuesWithDate.map(e => e.y),
Name: dataWithoutGaps.name
}
});
};

console.log(convert(first_array.map(e => e.DT), first_array));

预期:

[{"ValuesWithDate":[{"x":"2022-01-01","y":1547},{"x":"2022-01-02","y":500},{"x":"2022-01-03","y":1000}],"Values":[1547,500,1000],"Name":"Application 1"},{"ValuesWithDate":[{"x":"2022-01-01","y":685},{"x":"2022-01-02","y":300},{"x":"2022-01-03","y":0}],"Values":[685,300,0],"Name":"Application 2"},{"ValuesWithDate":[{"x":"2022-01-01","y":0},{"x":"2022-01-02","y":600},{"x":"2022-01-03","y":0}],"Values":[0,600,0],"Name":"Application 3"}]

您期望的结果可以通过此代码实现。

let filtered_app = new Set();
const obj = [];
first_array.forEach(item=>{
filtered_app.add(item.APP);
});
filtered_app.forEach(app =>{
first_array.forEach(item =>{
if(item.APP == app){
const exists = obj.findIndex(elem => elem.Name == app);
if(exists != '-1'){
obj[exists].Values.push(item.SPEED);
obj[exists].ValuesWithDate.push({x: item.DT, y: item.SPEED});
}
else{
obj.push({Name: app, Values: [item.SPEED], ValuesWithDate: [{x: item.DT, y: item.SPEED}]});
}
}
});
});
console.log(obj);

希望有帮助。

相关内容

最新更新