javascript中嵌套循环的理想方式

Question

我正在将数据绑定到Datagrid，并试图形成内部有多列的Bands。我有两个对象数组，第一个有列和数据，第二个有带信息。

columns= [
{
RNK: 1,
MONTHS: "Jan",
MOPS_KERO: 129.534,
"1-2": -4532.6048,
},
{
RNK: 2,
MONTHS: "Feb",
MOPS_KERO: 141.1474,
"1-2": -115628.1486,
}
];
bandInfo = [
{
SQL_COLUMN_NAME: "RNK",
DISPLAY_COLUMN_NAME: "Rnk",
SORT_ORDER: 1,
BAND_NAME: "Months",
},
{
SQL_COLUMN_NAME: "MONTHS",
DISPLAY_COLUMN_NAME: "Month",
SORT_ORDER: 2,
BAND_NAME: "Months",
},
{
SQL_COLUMN_NAME: "MOPS_KERO",
DISPLAY_COLUMN_NAME: "Avg. Mean For Kero Fortnight Month (USC/USG)",
SORT_ORDER: 5,
BAND_NAME: "3",
},
{
SQL_COLUMN_NAME: "1-2",
DISPLAY_COLUMN_NAME: "Premium Achieved Over Mean (USC/USG)",
SORT_ORDER: 6,
BAND_NAME: "1-2",
}
];

我正试图通过这个代码实现它-

columns.forEach((col) => {
this.bandInfo.forEach((element) => {
if (col.caption == element.BAND_NAME) {
col.columns.push({
caption: element.DISPLAY_COLUMN_NAME,
dataField: element.SQL_COLUMN_NAME,
});
} else {
col.caption = element.BAND_NAME;
col.columns = [];
col.columns.push({
caption: element.DISPLAY_COLUMN_NAME,
dataField: element.SQL_COLUMN_NAME,
});
}
});
});

但有了这个代码，我得到了一个类似的输出

[
{
"caption": "1-2",
"dataField": "RNK",
"columns": [
{
"caption": "Premium Achieved Over Mean (USC/USG)",
"dataField": "1-2"
}
]
},
{
"caption": "1-2",
"dataField": "MONTHS",
"columns": [
{
"caption": "Premium Achieved Over Mean (USC/USG)",
"dataField": "1-2"
}
]
},
{
"caption": "1-2",
"dataField": "MOPS_KERO",
"columns": [
{
"caption": "Premium Achieved Over Mean (USC/USG)",
"dataField": "1-2"
}
]
},
{
"caption": "1-2",
"dataField": "1-2",
"columns": [
{
"caption": "Premium Achieved Over Mean (USC/USG)",
"dataField": "1-2"
}
]
}
]

但我想要的输出应该是这样的-

[
{
"caption": "Months",
"dataField": "RNK",
"columns": [
{
"caption": "Month",
"dataField": "MONTHS"
},
{
"caption": "Rnk",
"dataField": "RNK"
}
]
},
{
"caption": "1-2",
"dataField": "MONTHS",
"columns": [
{
"caption": "Premium Achieved Over Mean (USC/USG)",
"dataField": "1-2"
}
]
},
{
"caption": "3",
"dataField": "MOPS_KERO",
"columns": [
{
"caption": "Avg. Mean For Kero Fortnight Month (USC/USG)",
"dataField": "MOPS_KERO"
}
]
}
]

我得到了与代码重复列。我不知道嵌套循环中出了什么问题。感谢您的帮助！谢谢

Answer 1

不确定为什么需要columns变量来生成该输出。但是：

const response = bandInfo.reduce((prev, curr) => {
const found = prev.find((el) => el.caption === curr.BAND_NAME);
if (!found) {
prev.push({
caption: curr.BAND_NAME,
dataField: curr.SQL_COLUMN_NAME,
columns: [
{ caption: curr.DISPLAY_COLUMN_NAME, dataField: curr.SQL_COLUMN_NAME },
],
});
return prev;
}
found.columns.push({
caption: curr.DISPLAY_COLUMN_NAME,
dataField: curr.SQL_COLUMN_NAME,
});
return prev;
}, []);
console.log(response)

生成您要求的输出。