How to increase the size of categories that found in type of items-CodePudding

Suppose I have a category NOTE THIS IS FOR FUNCTIONAL COMPONENT ONLY NOT CLASS COMPONENT

const category = ["Action","Female Games","Boys Games","Kids","Team","Guns","Parkour","Logic","Adventure","Hero Games",
                "Fun Games","War Games","Space Games","Free To Play",
                "F2P","Gache Game","NFT Game","Zombie Games","Multiplayer","Open-world Game",
                "Mobile Games","PvP Game","Clan Games"]

I have these random game items that supposed to connect with category otherwise it is null.

const PopularItems = [

        {imgPath:"",name:"Genshin Impact",type:["Free To Play","F2P","Gache Game","Adventure","Multiplayer","Open-world Game","Fun Games"],views:"213131",rate:"2.1"},
        {imgPath:"",name:"Crossfire",type:["Free To Play","F2P","Action","Guns","Multiplayer","Boys Games","War Games","Open-world Game","Fun Games"],views:"12161",rate:"4.1"},
        {imgPath:"",name:"Spiderman",type:["Parkour","Action","Adventure","Hero Games","Fun Games"],views:"232411",rate:"3.9"},
        {imgPath:"",name:"Apocalypse",type:["Zombie Games","Multiplayer","Open-world Game","Action","Guns","Team","Fun Games"],views:"232411",rate:"4.0"},
        {imgPath:"",name:"Honkai Impact",type:["Adventure","Free To Play","F2P","Gache Game","Action","Multiplayer","Open-world Game","Fun Games"],views:"232411",rate:"4.1"},
        {imgPath:"",name:"MIR4",type:["NFT Game","Action","Hero Games","Multiplayer","Open-world Game","Fun Games"],views:"232411",rate:"4.5"},
        {imgPath:"",name:"Minecraft",type:["Kids","Multiplayer","Open-world Game","Fun Games","Adventure"],views:"232411",rate:"4.6"},
        {imgPath:"",name:"Clash of Clan",type:["Mobile Games","PvP Game","Open-world Game","Fun Games","War Games","Hero Games", "Adventure"],views:"232411",rate:"4.1"},
        {imgPath:"",name:"Call of Duty",type:["War Games","Multiplayer","Open-world Game","Team","Guns","Adventure","Free To Play","F2P","Gache Game"],views:"232411",rate:"4.2"},
        {imgPath:"",name:"Valorant",type:["Multiplayer","Open-world Game","Team","Guns","Parkour","Action"],views:"232411",rate:"4.1"},
        {imgPath:"",name:"Mobile Legends Bang Bang",type:["Multiplayer","Open-world Game","Mobile Games","PvP Game","Clan Games","Hero Games"],views:"232411",rate:"4.3"}

]

I wanna find the if types can be found in categories and then increase the item size of each category whenever they find the match category to the game. What I mean is that whenever I find the types that match to categorylist then it will increase the item of the category.. Example if I found 3 Multiplayer games in PopularItems.type then multiplayer will be likemultiplayer:3 Another example

category.find( 5 War Games) => WarGames: 5
category.find( 10 Guns Games ) => GunsGames: 10

Can anyone give me an explanation? or solution for atleast? I already tried to create it with

includes() , indexOf(), some(), filter() or map() but I still don't understand.

CodePudding user response：

Here's one possible solution:

const findCategory = findThis => ({
    [findThis || 'Search Item']: PopularItems.reduce(
    (acc, itm) => itm.type.includes(findThis) ? acc   1 : acc, 0
  ) || 'Not found in category-array'
});

Explanation

The method findCategory returns an object
The key is the category being searched (or, if null, a default value)
The value is the number of times the category occurs in the PopularItems array (at the prop type within the elements of the array)

Code-snippet

const category = ["Action", "Female Games", "Boys Games", "Kids", "Team", "Guns", "Parkour", "Logic", "Adventure", "Hero Games", "Fun Games", "War Games", "Space Games", "Free To Play", "F2P", "Gache Game", "NFT Game", "Zombie Games", "Multiplayer", "Open-world Game", "Mobile Games", "PvP Game", "Clan Games"];

const PopularItems = [{
    imgPath: "",
    name: "Genshin Impact",
    type: ["Free To Play", "F2P", "Gache Game", "Adventure", "Multiplayer", "Open-world Game", "Fun Games"],
    views: "213131",
    rate: "2.1"
  },
  {
    imgPath: "",
    name: "Crossfire",
    type: ["Free To Play", "F2P", "Action", "Guns", "Multiplayer", "Boys Games", "War Games", "Open-world Game", "Fun Games"],
    views: "12161",
    rate: "4.1"
  },
  {
    imgPath: "",
    name: "Spiderman",
    type: ["Parkour", "Action", "Adventure", "Hero Games", "Fun Games"],
    views: "232411",
    rate: "3.9"
  },
  {
    imgPath: "",
    name: "Apocalypse",
    type: ["Zombie Games", "Multiplayer", "Open-world Game", "Action", "Guns", "Team", "Fun Games"],
    views: "232411",
    rate: "4.0"
  },
  {
    imgPath: "",
    name: "Honkai Impact",
    type: ["Adventure", "Free To Play", "F2P", "Gache Game", "Action", "Multiplayer", "Open-world Game", "Fun Games"],
    views: "232411",
    rate: "4.1"
  },
  {
    imgPath: "",
    name: "MIR4",
    type: ["NFT Game", "Action", "Hero Games", "Multiplayer", "Open-world Game", "Fun Games"],
    views: "232411",
    rate: "4.5"
  },
  {
    imgPath: "",
    name: "Minecraft",
    type: ["Kids", "Multiplayer", "Open-world Game", "Fun Games", "Adventure"],
    views: "232411",
    rate: "4.6"
  },
  {
    imgPath: "",
    name: "Clash of Clan",
    type: ["Mobile Games", "PvP Game", "Open-world Game", "Fun Games", "War Games", "Hero Games", "Adventure"],
    views: "232411",
    rate: "4.1"
  },
  {
    imgPath: "",
    name: "Call of Duty",
    type: ["War Games", "Multiplayer", "Open-world Game", "Team", "Guns", "Adventure", "Free To Play", "F2P", "Gache Game"],
    views: "232411",
    rate: "4.2"
  },
  {
    imgPath: "",
    name: "Valorant",
    type: ["Multiplayer", "Open-world Game", "Team", "Guns", "Parkour", "Action"],
    views: "232411",
    rate: "4.1"
  },
  {
    imgPath: "",
    name: "Mobile Legends Bang Bang",
    type: ["Multiplayer", "Open-world Game", "Mobile Games", "PvP Game", "Clan Games", "Hero Games"],
    views: "232411",
    rate: "4.3"
  }
];

const findCategory = findThis => ({
  [findThis || 'Search Item']: PopularItems.reduce(
    (acc, itm) => itm.type.includes(findThis) ? acc   1 : acc, 0
  ) || 'Not found in category-array'
});

console.log('search: null\n', findCategory());
console.log('search: War Games\n', findCategory('War Games'));
console.log('search: Multiplayer\n', findCategory('Multiplayer'));