我有一個物件陣列，帶有嵌套物件：
const data = [{
"operationId": "6357a5bba0de053fb601d573",
"tags": {
"120": {
"title": "ac milan",
"color": "red",
"updated_at": "2022-10-25 08:52:00",
"created_at": "2022-10-25 08:52:00",
"_id": "6357a3b06891976bca0a9215"
},
"121": {
"title": "napoli",
"color": "blue",
"updated_at": "2022-10-25 08:54:12",
"created_at": "2022-10-25 08:54:12",
"_id": "6357a43470761099ce0049e0"
},
}
}, {
"operationId": "6357a5c9a0de053fb601d574",
"tags": {
"118": {
"title": "ac roma",
"color": "red",
"updated_at": "2022-10-25 07:54:19",
"created_at": "2022-10-25 07:54:19",
"_id": "6357962b6891976bca0a920e"
},
"120": {
"title": "ac milan",
"color": "red",
"updated_at": "2022-10-25 08:52:00",
"created_at": "2022-10-25 08:52:00",
"_id": "6357a3b06891976bca0a9215"
},
}
}];
在哪里：
operationId- 檔案編號；tags- 系結到檔案標簽的物件。
根據這些資訊，我需要在標記中顯示標簽串列。但是相同的標簽可以附加到不同的檔案（如示例中 - “AC米蘭”標簽附加到兩個檔案）。在這種情況下，標簽必須被渲染一次。我當前對物件陣列的迭代沒有考慮到這個特性，而是連續顯示所有內容，但我真的不明白如何修復它。
function addExistingTagsToModal(arr) {
let existingTagTitle, existingTagColor, existingTagID;
const constructedData = arr.map(item => {
const operationId = item?.operationId;
const innerValues = Object.values(item.tags);
return innerValues.map(subItem => {
existingTagID = subItem._id;
existingTagTitle = subItem.title;
existingTagColor = subItem.color;
let tagObjMarkup = {
tagMarkup: `<li>${existingTagTitle}</li>`
};
let addedTagList = document.querySelector('.list');
addedTagList.insertAdjacentHTML('afterbegin', tagObjMarkup.tagMarkup);
return {
...subItem,
operationId
}
});
});
}
addExistingTagsToModal(data);
這是一個作業示例（Codepen）。總結一下：在上面的代碼中，AC米蘭應該顯示1次。怎么做？
uj5u.com熱心網友回復：
您只需要跟蹤現有標題，因此我創建了一個物件const tagTitleDict = {};并檢查其中已有的鍵。如果在其中找到一個鍵，tagTitleDict則無需在串列中再次插入它<ul></ul>。
function addExistingTagsToModal(arr) {
let existingTagTitle, existingTagColor, existingTagID;
const tagTitleDict = {};
const constructedData = arr.map((item) => {
const operationId = item?.operationId;
const innerValues = Object.values(item.tags);
return innerValues.map((subItem) => {
existingTagID = subItem._id;
existingTagTitle = subItem.title;
existingTagColor = subItem.color;
if (!(existingTagTitle in tagTitleDict)) {
let tagObjMarkup = {
tagMarkup: `<li>${existingTagTitle}</li>`
};
let addedTagList = document.querySelector(".list");
addedTagList.insertAdjacentHTML("afterbegin", tagObjMarkup.tagMarkup);
tagTitleDict[existingTagTitle] = true;
}
return {
...subItem,
operationId
};
});
});
}
已適應您的codepen
希望有幫助，加油！
轉載請註明出處，本文鏈接：https://www.uj5u.com/qukuanlian/525025.html