Calculating how many times an object in one array occurs in another deeply nested array with Reactjs

Viewed 35

I am trying to compare how many times objects from one array occur inside deeply nested objects in another array and render a card.

Here is my data object:

collections: [{
    amount: 3
    gameType: "rts"
    gameWin: true
    entryId: 1
},
{
    amount: 5
    gameType: "shooter"
    gameWin: true
    entryId: 2
},
{
    amount: 11
    gameType: "rpg"
    gameWin: true
    entryId: 3
},
{
    amount: 12
    gameType: "blackjack"
    gameWin: true
    entryId: 4
}]
currencyCode: "USD"
entryId: "596"
playerId: "1112331asdasx"
receipt: "1112331asdasx711a6b1"
selections: [{
    expiryTime: 1654534799000
    maxPlays: 10
    spins:[{
        prizes: []
        receipt: "0f36f427d43aac5d63f6074c50e04800507d6863"
        results:[{
            gameType: "rts"
            entrySelnSpinId: 3505
            },
            {
            gameType: "rpg"
            entrySelnSpinId: 1505
            },
            {
            gameType: "rpg"
            entrySelnSpinId: 2505
            }]
        },
        {
        prizes: []
        receipt: "427d43aa4800507d6863c5d63f6074c50e00f36f"
        results:[{
            gameType: "shooter"
            entrySelnSpinId: 3205
            },
            {
            gameType: "shooter"
            entrySelnSpinId: 1305
            },
            {
            gameType: "blackjack"
            entrySelnSpinId: 2105
            }]
        }]
}]
status: "active"

My attempt at solving this issue:

const calculatedAmount = selections.map((selection:any)=>{
      return selection.spins.forEach((spin:any)=>{
        spin.results.map((result:any)=>{
          console.log(result)
          return collections.filter(collection => collection.gameType === result.gameType).length; 
        })
      })
    })

Here I am trying to render an element showing the count of how many times the gameType from collections occurs in the results array inside selections

  {collections.map((collection: IReelMoneyCollection) => {
    return <GamesCard totalodds={ calculatedAmount + " / " + collection.targetAmount} />;
  })}

How can I calculate how many times different do gameType from the collections array occur inside the results in the selections array and render my component with it?

Like rendering a Game Card for RTS which shows 2, since it only occurs twice. Then another card for Shooter showing 2, one for Blackjack showing 1.

0 Answers
Related