.map() removes duplicates but I want to keep duplicates?-CodePudding

I have this large array of API data that I filter down to a smaller amount. The issue is that the current system I made uses .map() to set an order preference for that data but it removes any duplicates. The data is filtered by sports league so if two games from the same league are played two should go through to the final array, but only one goes through. The ordered array removes duplicates.

const json = (await res.json())?.response;

const ordered = desiredOrder.map((id) => json.find(({ league }) => league?.id === id));

const filtered = [...new Set(ordered)].filter(item => item !== undefined)

Here is the desiredOrdered array, each league is designated a number and then the leagues are ranked best to worst.

var desiredOrder = [
    1, 2, 3, 4, 5, 6, 7, 9, 10, 29, 30, 31, 32, 33, 34, 39, 45, 48, 140, 142, 135, 137, 78, 81, 61, 65, 66, 88, 94, 96, 253, 203, 262, 179, 185,
    144, 188, 169, 40, 41, 42, 43, 235, 207, 218, 141, 136, 333, 307, 197, 62, 79, 80, 128, 130, 292, 98, 101, 103, 106, 113, 119, 283, 71, 73,
    265, 239, 211, 89,
];

Here is the API output so you can see where the id is derived (there are over 100 of these elements, this is entry 0)

0:
fixture: {id: 710877, referee: 'Anthony Taylor, England', timezone: 'UTC', date: '2022-05-19T18:45:00 00:00', timestamp: 1652985900, …}
goals: {home: 3, away: 2}
league: {id: 39, name: 'Premier League', country: 'England', logo: 'https://media.api-sports.io/football/leagues/39.png', flag: 'https://media.api-sports.io/flags/gb.svg', …}
score: {halftime: {…}, fulltime: {…}, extratime: {…}, penalty: {…}}
teams: {home: {…}, away: {…}}
[[Prototype]]: Object

So using the output above, I need to make it so another game with id 39 is filtered through into the array. I have tried a lot of things to make it work but it is not working.

If you want to play with WebDev --> https://footballify.net/test

Github - https://github.com/Footballify/Footballify.github.io/tree/main/test

=nn

CodePudding user response：

map does not remove duplicates, Set does.

See MDN:

Set objects are collections of values. You can iterate through the elements of a set in insertion order. A value in the Set may only occur once; it is unique in the Set's collection.

If you want to allow duplicates, don't use a Set.

Also MDN

The find() method returns the first element in the provided array that satisfies the provided testing function. If no values satisfy the testing function, undefined is returned.

If you want to match every result, then use filter() instead.

The filter() method creates a new array with all elements that pass the test implemented by the provided function.

You might want to flatten the array you assign to ordered