Count same property value from multiple objects-CodePudding

I'm coding a Football Team Builder and want to count a specific property from inside multiple objects. In this case, I want to count the nationality of 5 football players. The number of football players from the same nation needs to be counted and added to the total number of skill points from the active players. (See code)

I read something about 'Object.keys' on here but my knowledge of JavaScript seems too low to use it properly.

HTML

<h1> Create your Five-a-side Team </h1>
<p> Formation: <span>1-2-1</span></p>

<p>
Attacker 1: <span id="attacker_1">  </span> <br>
Midfielder 1: <span id="midfielder_1"> </span> <br>
Midfielder 2: <span id="midfielder_2"> </span> <br>
Defender 1: <span id="defender_1"> </span> <br>
Keeper: <span id="keeper"> </span> <br>
</p>

<p>
Total Skill Points: <span id="total_skill_points"> 0</span>&#9733;
</p>

<p>
You have <span id="same_nation_count">0</span>  
players from <span id="nation_name">the same Nation</span>. 
<br>
That means you got <span id="bonus_points"
>0</span> Bonus points added to your Total Skill Points!
</p>

JavaScript

// Attacker 1
const captain_01 = {
    firstName: 'Johan', 
  lastName: 'Cruijff',
  skillPoints: 5,
  position: 'Attacker',
  club: 'FC Barcelona',
  nation: 'The Netherlands'
}; captain_01.fullName = `${captain_01.firstName} ${captain_01.lastName}`;

// Midfielder 1
const topclass_01 = {
    firstName: 'Frenkie', 
  lastName: 'de Jong',
  skillPoints: 4,
  position: 'Midfielder',
  club: 'FC Barcelona',
  nation: 'The Netherlands'
}; topclass_01.fullName = `${topclass_01.firstName} 
${topclass_01.lastName}`;

// Midfielder 2
const talent_01 = {
    firstName: 'Ryan',
  lastName: 'Gravenberch',
  skillPoints: 3,
  position: 'Midfielder',
  club: 'Ajax',
  nation: 'The Netherlands'
}; talent_01.fullName = `${talent_01.firstName} 
${talent_01.lastName}`;

// Defender 1
const worldclass_01 = {
    firstName: 'Virgil', 
  lastName: 'van Dijk',
  skillPoints: 5,
  position: 'Defender',
  club: 'Liverpool',
  nation: 'The Netherlands'
}; worldclass_01.fullName = `${worldclass_01.firstName} 
${worldclass_01.lastName}`;

// Keeper 
const keeper_01 = {
    firstName: 'Gianluigi',
  lastName: 'Donnarumma',
  skillPoints: 5,
  position: 'Keeper',
  club: 'PSG',
  nation: 'Italy'
}; keeper_01.fullName = `${keeper_01.firstName} 
${keeper_01.lastName}`;


// Active Attacker 1
document.getElementById("attacker_1").innerHTML =
`${captain_01.fullName} (${captain_01.skillPoints}&#9733;) 
(${captain_01.nation})`;

// Active Midfielder 1
document.getElementById("midfielder_1").innerHTML =
`${talent_01.fullName} (${talent_01.skillPoints}&#9733;)
(${talent_01.nation})`;

// Active Midfielder 2
document.getElementById("midfielder_2").innerHTML =
`${topclass_01.fullName} (${topclass_01.skillPoints}&#9733;)
(${topclass_01.nation})`;

// Active Defender 1
document.getElementById("defender_1").innerHTML =
`${worldclass_01.fullName} (${worldclass_01.skillPoints}&#9733;) (${worldclass_01.nation})`;

// Active Keeper
document.getElementById("keeper").innerHTML =
`${keeper_01.fullName} (${keeper_01.skillPoints}&#9733;)
(${keeper_01.nation})`;


// Counts the amount of players from the same nation
let nationCount = '';

// Counts Bonus Points to the Total Skill Points
let bonusPoints = nationCount;
document.getElementById("bonus_points").innerHTML =
bonusPoints;

// Total Skill Points calculator
document.getElementById("total_skill_points").innerHTML =
captain_01.skillPoints   talent_01.skillPoints   
topclass_01.skillPoints   worldclass_01.skillPoints   
keeper_01.skillPoints   bonusPoints;

// Sets name for nation by calculating the most common nation among the players
document.getElementById("nation_name").innerHTML ;

Here's my JSFiddle: https://jsfiddle.net/u3tL65xz/1/

CodePudding user response：

Place the player objects into a collection first to make it easier to process them. Then create a unique list of "nations" from the players list. You can ensure uniqueness by using a Set object. Then you can simply filter on the field based upon the nation property and count the total for each unique nation represented.

const captain_01={firstName:'Johan',lastName:'Cruijff',skillPoints:5,position:'Attacker',club:'FC Barcelona',nation:'The Netherlands'};captain_01.fullName=`${captain_01.firstName} ${captain_01.lastName}`;const topclass_01={firstName:'Frenkie',lastName:'de Jong',skillPoints:4,position:'Midfielder',club:'FC Barcelona',nation:'The Netherlands'};topclass_01.fullName=`${topclass_01.firstName} 
${topclass_01.lastName}`;const talent_01={firstName:'Ryan',lastName:'Gravenberch',skillPoints:3,position:'Midfielder',club:'Ajax',nation:'The Netherlands'};const worldclass_01={firstName:'Virgil',lastName:'van Dijk',skillPoints:5,position:'Defender',club:'Liverpool',nation:'The Netherlands'};const keeper_01={firstName:'Gianluigi',lastName:'Donnarumma',skillPoints:5,position:'Keeper',club:'PSG',nation:'Italy'};

const players = [captain_01, topclass_01, talent_01, worldclass_01,keeper_01];
const nations = new Set(players.map(p=>p.nation));
const output = Array.from(nations).map(n=>{return {[n]:players.filter(p=>p.nation === n).length}});

console.log(output);

CodePudding user response：

As you have 5 players' object ready, it is pretty simple to calculate the count of players grouped by their nation. The below is the snippet which shows collecting all 5 players' objects in an array, and using a loop to traverse the players' objects, and finally store them in nationCount. If the nation comes inside the loop for the first time, there will be no data in nationCount when we try to find, so we push the object with count 1. If same nation comes inside the loop for the second or more than two times, we just increase the count value. So finally the result of nationCount will be like:

[
    {
         nation: "The Netherlands",
         count: 5
    },
    ... and so on for more countries
]

let players = [{ firstName: 'Johan', lastName: 'Cruijff', skillPoints: 5, position: 'Attacker', club: 'FC Barcelona', nation: 'The Netherlands' },{ firstName: 'Virgil', lastName: 'van Dijk', skillPoints: 5, position: 'Defender', club: 'Liverpool', nation: 'The Netherlands' },{ firstName: 'Frenkie', lastName: 'de Jong', skillPoints: 4, position: 'Midfielder', club: 'FC Barcelona', nation: 'The Netherlands' },{ firstName: 'Ryan', lastName: 'Gravenberch', skillPoints: 3, position: 'Midfielder', club: 'Ajax', nation: 'The Netherlands' },{ firstName: 'Jasper', lastName: 'Cillessen', skillPoints: 2, position: 'Keeper', club: 'Valencia', nation: 'India' }]

// In your case, ignore the above one. The players object should be the one below.
//let players = [captain_01,talent_01,topclass_01,talent_01,average_01];
let nationCount = [];
for (let player of players) {
  let existingNation = nationCount.find(ele => ele.nation === player.nation)
  if (existingNation)
    existingNation.count  ;
  else
    nationCount.push({
      nation: player.nation,
      count: 1
    })
}
console.log(nationCount)

I hope this object will help you proceed further with your game logic of manipulating the points.

CodePudding user response：

A simple solution would be to loop through the objects and count the occurrence of nation

async function nationPlayerMapper() { 
    const arr = {};
    const data = [captain_01,worldclass_01,average_01,topclass_01,talent_01];
    await data.map(obj => {
        const {nation} = obj;
        if (!arr[nation]) {
            arr[nation] = 1;
        } else {
            arr[nation]  = 1;
    }
    });
  
  for (let [nation, count] of Object.entries(arr)) {
    console.log(`Count Of Same Players From ${nation} is ${count}`);
  }
 
}

// Counts the amount of players from the same Nation
let nationCount = nationPlayerMapper();

let captain_01 = {
    firstName: 'Johan', 
  lastName: 'Cruijff',
  skillPoints: 5,
  position: 'Attacker',
  club: 'FC Barcelona',
  nation: 'The Netherlands'
};
captain_01.fullName = `${captain_01.firstName} ${captain_01.lastName}`;

let worldclass_01 = {
    firstName: 'Virgil', 
  lastName: 'van Dijk',
  skillPoints: 5,
  position: 'Defender',
  club: 'Liverpool',
  nation: 'The Netherlands'
};
worldclass_01.fullName = `${worldclass_01.firstName} 
${worldclass_01.lastName}`;

let topclass_01 = {
    firstName: 'Frenkie', 
  lastName: 'de Jong',
  skillPoints: 4,
  position: 'Midfielder',
  club: 'FC Barcelona',
  nation: 'The Netherlands'
};
topclass_01.fullName = `${topclass_01.firstName} 
${topclass_01.lastName}`;

let talent_01 = {
    firstName: 'Ryan',
  lastName: 'Gravenberch',
  skillPoints: 3,
  position: 'Midfielder',
  club: 'Ajax',
  nation: 'The Netherlands'
};
talent_01.fullName = `${talent_01.firstName} 
${talent_01.lastName}`;

let average_01 = {
    firstName: 'Jasper',
  lastName: 'Cillessen',
  skillPoints: 2,
  position: 'Keeper',
  club: 'Valencia',
  nation: 'The Netherlands'
};

async function nationPlayerMapper() { 
    const arr = {};
    const data = [captain_01,worldclass_01,average_01,topclass_01,talent_01];
    await data.map(obj => {
        const {nation} = obj;
        if (!arr[nation]) {
            arr[nation] = 1;
        } else {
            arr[nation]  = 1;
    }
    });
  
  for (let [nation, count] of Object.entries(arr)) {
    console.log(`Count Of Same Players From ${nation} is ${count}`);
  }
 
}

// Counts the amount of players from the same Nation
let nationCount = nationPlayerMapper();