How to remove duplicate elements from an object?

Good morning. I have a problem. There is an array that contain objects, and these objects are listed properties. I need to remove one of the duplicate properties. In the end, I have to list these properties in the container in the html page. Below is an array of objects.

0:
building: ""
category: "Walls"
family: "Basic Wall"
level: ""
revitid: "281899"
room: ""
symbol: "Wall-Ext_102Bwk-75Ins-100LBlk-12P"
viewid: 3300
__proto__: Object
1:
building: ""
category: "Walls"
family: "Basic Wall"
level: ""
revitid: "282264"
room: ""
symbol: "Wall-Ext_102Bwk-75Ins-250LBlk-12P 2"
viewid: 3304
__proto__: Object
length: 2
__proto__: Array(0)


I.e., an array with objects I have to remove the second object has a property category: "Walls", family: "Basic Wall" and, in addition, symbol: "Wall-Ext_102Bwk-75Ins-250LBlk-12P 2"(although the latter property are different)

In the end, this array should be generated on the html page of this list
the <ul><li>Walls</li> <!-- Category -->
 the <ul><li>Basic Wall</li> <!-- family -->
 the <ul><li>Wall-Ext_102Bwk-75Ins-102LBlk-12P</li> <!--symbol -->
 the <ul><li>Basic Wall ["281899"]</li> <!-- family + revitid -->
 the <li>Basic Wall ["282264"]</li></ul> <!-- family + revitid -->
</ul>
</ul>
</ul>


I have code for this, but it is very bad for spike and below here is my code.

newData.forEach(e => {
 // console.log(e['category']);
 if (e['category'] === e['category']) {
 delete newData[1].category;
};
 if (e['symbol'] === e.symbol) {
 delete newData[1].symbol;
};
 if(e.family === e.family) {
 delete newData[1].family;
}
});
console.log(newData);
 newData.forEach(el => {
 html += ";
 if (el.category !== undefined) {
 html += `<li>${el['category']}</li>`;
};
 if (el.family !== undefined) {
 html += `<ul><li>${el['family']}</li>`;
};
 if (el.symbol !== undefined) {
 html += `<li>${el['symbol']}</li>`;
};
 if (el.family !== undefined) {
 html += `<li>${el['family']} ${el['revitid']}</li>`;
 } else {
 newData[1].family = newData[0].family;
 html += `${el['family']} ${el['revitid']}</li>`;
}
 html += '</ul>';
})
 document.getElementById('differencesDiv').innerHTML = html;


Very hope for your help, I would be very grateful.
March 19th 20 at 09:07
2 answers
March 19th 20 at 09:09
Solution
as already said, it is better to group the properties, but if you do not want, then...
https://jsfiddle.net/ahzj9nqf/
Thank you brother, helped out, not that some of the stack. - icie.Lynch commented on March 19th 20 at 09:12
March 19th 20 at 09:11
Propose another way.
First group by the desired fields.
And having a tree would be easier to draw.
https://codesandbox.io/s/50y3y7ly8k

[
{
 "title": "Walls",
 "children": [
{
 "title": "Basic Wall",
 "children": [
 .....
Thank you so much, sorry that your decision was not said decision, it is just because react components are not checked. In any case, thank you very much. - icie.Lynch commented on March 19th 20 at 09:14

Find more questions by tags JavaScript