如何从 javascript 中的数组 object 中删除重复项

Question

我想删除重复项，并且只在子对象数组中留下唯一的项目。

 function display_message() { let filteredSerivces = [ { "ServiceTypeId": 805, "ServiceTypeName": "Custom Services 1", "GroupedServices": [ { "Id": 5247, "ServiceTypeId": 805, "ServiceName": "Some service A2", "Name": "A1", "Duration": 30, "DurationForClient": 30, "Order": 4, "EmployeeId": 3683 }, { "Id": 5254, "ServiceTypeId": 805, "ServiceName": "Some service A2", "Name": "A2", "Duration": 30, "DurationForClient": 30, "Order": 4, "EmployeeId": 3683 }, { "Id": 5254, "ServiceTypeId": 805, "ServiceName": "Some service A6", "Name": "A2", "Duration": 30, "DurationForClient": 30, "Order": 4, "EmployeeId": 3684 } ], "Order": 4 }, { "ServiceTypeId": 804, "ServiceTypeName": "Custom Services 2", "GroupedServices": [ { "Id": 5246, "ServiceTypeId": 804, "ServiceName": "Some service B1", "Name": "B1", "Duration": 30, "DurationForClient": 30, "Order": 5, "EmployeeId": 3696 }, { "Id": 5248, "ServiceTypeId": 804, "ServiceName": "Some service B2", "Name": "B2", "Duration": 30, "DurationForClient": 30, "Order": 5, "EmployeeId": 3700 }, { "Id": 5248, "ServiceTypeId": 804, "ServiceName": "Some service B2", "Name": "B2", "Duration": 30, "DurationForClient": 30, "Order": 5, "EmployeeId": 3683 } ], "Order": 5 } ] //TASK: The goal is to remove duplicate object (leave just one) from an array object GroupedServices // the key for this distinction is "Id". // example: // { // "Id": 5254, // "ServiceTypeId": 805, // "ServiceName": "Some service A2", // "Name": "A2", // "Duration": 30, // "DurationForClient": 30, // "Order": 4, // "EmployeeId": 3683 // }, // { // "Id": 5254, // "ServiceTypeId": 805, // "ServiceName": "Some service A6", // "Name": "A2", // "Duration": 30, // "DurationForClient": 30, // "Order": 4, // "EmployeeId": 3684 // } //=> in this case we need to remove second object, because it has same Id with a first object (Id: 5254) //WHAT I HAVE BEEN TRIED: var uniqueGroupedServices = Array.from(filteredSerivces.GroupedServices().reduce((map, obj) => map.set(obj.Id, obj), new Map()).values()); console.log(uniqueGroupedServices); }

 <input type="button" onclick="display_message();" value="click"/>

但显然我的代码不起作用。 我想我需要迭代这个主数组中for each来接近GroupedServices但我不知道如何。 另外，如何删除第二次相同的 object（相同的 ID）？

Answer 1

这是 util 方法uniqById ，使用set和filter

 const uniqById = (arr) => { const track = new Set(); return arr.filter(({ Id }) => (track.has(Id)? false: track.add(Id))); }; const filteredSerivces=[{ServiceTypeId:805,ServiceTypeName:"Custom Services 1",GroupedServices:[{Id:5247,ServiceTypeId:805,ServiceName:"Some service A2",Name:"A1",Duration:30,DurationForClient:30,Order:4,EmployeeId:3683},{Id:5254,ServiceTypeId:805,ServiceName:"Some service A2",Name:"A2",Duration:30,DurationForClient:30,Order:4,EmployeeId:3683},{Id:5254,ServiceTypeId:805,ServiceName:"Some service A6",Name:"A2",Duration:30,DurationForClient:30,Order:4,EmployeeId:3684}],Order:4},{ServiceTypeId:804,ServiceTypeName:"Custom Services 2",GroupedServices:[{Id:5246,ServiceTypeId:804,ServiceName:"Some service B1",Name:"B1",Duration:30,DurationForClient:30,Order:5,EmployeeId:3696},{Id:5248,ServiceTypeId:804,ServiceName:"Some service B2",Name:"B2",Duration:30,DurationForClient:30,Order:5,EmployeeId:3700},{Id:5248,ServiceTypeId:804,ServiceName:"Some service B2",Name:"B2",Duration:30,DurationForClient:30,Order:5,EmployeeId:3683}],Order:5}]; const output = filteredSerivces.map((item) => ({...item, GroupedServices: uniqById(item.GroupedServices), })); console.log(output);

Answer 2

没仔细看。 您是要删除每个元素或整个列表的重复项吗？

 function display_message() { let filteredSerivces = [ { "ServiceTypeId": 805, "ServiceTypeName": "Custom Services 1", "GroupedServices": [ { "Id": 5247, "ServiceTypeId": 805, "ServiceName": "Some service A2", "Name": "A1", "Duration": 30, "DurationForClient": 30, "Order": 4, "EmployeeId": 3683 }, { "Id": 5254, "ServiceTypeId": 805, "ServiceName": "Some service A2", "Name": "A2", "Duration": 30, "DurationForClient": 30, "Order": 4, "EmployeeId": 3683 }, { "Id": 5254, "ServiceTypeId": 805, "ServiceName": "Some service A6", "Name": "A2", "Duration": 30, "DurationForClient": 30, "Order": 4, "EmployeeId": 3684 } ], "Order": 4 }, { "ServiceTypeId": 804, "ServiceTypeName": "Custom Services 2", "GroupedServices": [ { "Id": 5246, "ServiceTypeId": 804, "ServiceName": "Some service B1", "Name": "B1", "Duration": 30, "DurationForClient": 30, "Order": 5, "EmployeeId": 3696 }, { "Id": 5248, "ServiceTypeId": 804, "ServiceName": "Some service B2", "Name": "B2", "Duration": 30, "DurationForClient": 30, "Order": 5, "EmployeeId": 3700 }, { "Id": 5248, "ServiceTypeId": 804, "ServiceName": "Some service B2", "Name": "B2", "Duration": 30, "DurationForClient": 30, "Order": 5, "EmployeeId": 3683 } ], "Order": 5 } ]; for (const [key, value] of Object.entries(filteredSerivces)) { var uniqueGroupedServices = Array.from(value.GroupedServices.reduce((map, obj) => map.set(obj.Id, obj), new Map()).values()); document.getElementById('results').innerHTML = document.getElementById('results').innerHTML+JSON.stringify(uniqueGroupedServices,null,2); } }

 <pre id = "results"></pre> <input type="button" onclick="display_message();" value="click"/>