Мне нужна помощь в оптимизации моего кода.
Объяснение:
Я получаю список данных через API, содержащий код типа, цветовой код и идентификатор .
[
{"id": 3, "ifsType": "5572", "ifsColor": "DC1A"},
{"id": 4, "ifsType": "6E6A", "ifsColor": "38D1"},
{"id": 6, "ifsType": "6E6A", "ifsColor": "11BB"},
{"id": 15, "ifsType": "688F", "ifsColor": "CFA1"},
{"id": 16, "ifsType": "688F", "ifsColor": "6926"},
{"id": 18, "ifsType": "5572", "ifsColor": "39E6"},...
]
Я отображаю этот список данных в таблице матов, группируя их по коду типа (ifsType
).
groupBy(list: any[], key: string): any[] {
return list.reduce((acc, item) => (acc[item[key]] = [...(acc[item[key]] || []), item], acc), {});
}
this.dataSource = Object.values(this.groupBy(ELEMENT_DATA, "ifsType"));
[
[
{"id": 3, "ifsType": "5572", "ifsColor": "DC1A"},
{"id": 18, "ifsType": "5572", "ifsColor": "39E6"}
],
[
{"id": 4, "ifsType": "6E6A", "ifsColor": "38D1"},
{"id": 6, "ifsType": "6E6A", "ifsColor": "11BB"}
],
[
{"id": 15, "ifsType": "688F", "ifsColor": "CFA1"},
{"id": 16, "ifsType": "688F", "ifsColor": "6926"}
],...
]
В моем случае для добавления или удаления тип с его цветами, я возвращаю список для добавления или удаления в API
Однако для редактирования список должен быть изменен через форму. Таким образом, эта модификация приводит к добавлению и / или удалению одного или нескольких цветов для типа.
Следовательно, мне нужно определить элементы, которые нужно добавить в список, а также те, которые нужно удалить так что API позаботится об изменении в БД. Поэтому список для возврата в API изменяется следующим образом:
StackBlitz Link
// Simulating an edit
// Remove the 1st color and add a new one
var newColorCode: string[] = [typeColors[1].ifsColor, newColor(4)]
let formControlIfsType: FormControl = new FormControl(typeColors[0].ifsType)
let formControlIfsColor: FormControl = new FormControl(newColorCode)
/* ========================================================
* CODE TO OPTIMIZE
* ======================================================== */
var toAdd: any = [];
var toRemove: any = [];
// Element to remove
typeColors.filter(element => element.ifsType == formControlIfsType.value)
.forEach(element => {
if (!formControlIfsColor.value.includes(element.ifsColor)) {
toRemove.push(element.ifsColor);
}
}
)
// Element to add
formControlIfsColor.value.forEach(element => {
if (!typeColors.map(tc => tc.ifsColor).includes(element)) {
toAdd.push(element);
}
})
toRemove.forEach(element => {
const index = typeColors.findIndex(tc => tc.ifsColor === element);
typeColors.splice(index, 1);
})
toAdd.forEach(element => {
typeColors.push(new TypeColor({ifsType: formControlIfsType.value, ifsColor: element}));
})
I go через несколько списков и Мне это не очень нравится, так как это может замедлить обработку. Поэтому я хотел бы знать, существует ли лучшее решение
Спасибо