Tell us what’s happening:
In this Lab I am trying to filter some players based on their position, but I am having some trouble syntax wise with filtering their positioning.
Your code so far
<!-- file: index.html -->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>
Build a Set of Football Team Cards
</title>
<link rel="stylesheet" href="styles.css" />
</head>
<body>
<h1 class="title">Team stats</h1>
<main>
<div class="team-stats">
<p>Team: <span id="team"></span></p>
<p>Year: <span id="year"></span></p>
<p>Head coach: <span id="head-coach"></span></p>
</div>
<label class="options-label" for="players">Filter Teammates:</label>
<select name="players" id="players">
<option value="all">All Players</option>
<option value="forward">Position Forward</option>
<option value="midfielder">Position Midfielder</option>
<option value="defender">Position Defender</option>
<option value="goalkeeper">Position Goalkeeper</option>
</select>
<div class="cards" id="player-cards"></div>
</main>
<footer>© freeCodeCamp</footer>
<script src="./script.js"></script>
</body>
</html>
/* file: styles.css */
/* file: script.js */
const footballTeam = {
team: "New England Patriots",
year: 2026,
headCoach: "Mike Vrabel",
players: [
{
name: "Drake Maye",
positon: "forward",
isCaptain: true
},
{
name: "Christian Gonzales",
positon: "midfielder",
isCaptain: false
},
{
name: "Player Three",
positon: "defender",
isCaptain: false
},
{
name: "Player Four",
positon: "goalkeeper",
isCaptain: false
}
]
}
const teamEl = document.querySelector("#team");
const yearEl = document.querySelector("#year");
const headCoachEl = document.querySelector("#head-coach");
teamEl.textContent = footballTeam.team;
yearEl.textContent = footballTeam.year;
headCoachEl.textContent = footballTeam.headCoach;
const playerCardsEl = document.querySelector("#player-cards");
playerCardsEl.innerHTML = `<div class="player-card">
<h2>(Captain) Drake Maye</h2>
<p>Position: forward</p>
</div>
<div class="player-card">
<h2>Christian Gonzalez</h2>
<p>Position: midfielder</p>
</div>
<div class="player-card">
<h2>Player Three</h2>
<p>Position: defender</p>
</div>
<div class="player-card">
<h2>Player Four</h2>
<p>Position: goalkeeper</p>
</div>`;
function helperFunction(playerPosition) {
const teammates =
playerPosition === "all"
? footballTeam.players
// This ELSE condition for the ternary operator does NOT work
: footballTeam.players.filter(({position}) => position === playerPosition);
return teammates
.map(({name, position}) => {
return `<div class="player-card">
<h2>${name}</h2>
<p>Position: ${position}</p>
</div>`;
})
}
const playerListEl = document.querySelector("#players");
playerListEl.addEventListener("change", () => {
playerCardsEl.innerHTML = helperFunction(players.value);
});
// Prints out entire array
// console.log(footballTeam.players);
// Unable to access property of object in subarray
console.log(footballTeam.players[0]);
console.log(footballTeam.players[0].position);
I added some comments in the script describing the issue I am having. I want to be able to access elements from the players property in the footballTeams array in a filtered manner. Meaning, I would like to only print out elements from the array that is the property’s value that correspond to a certain position. Like I would only like to display elements that contain the value “midfielder” or “forward”. I’m just confused syntax wise with the way this object is structured and I can’t chain things how I regularly would.
Also, I am aware that this is an american football team when it meant actual football in the instructions. I didn’t realize until later, but by then I already added in all the details.
Console Output:
{ name: 'Drake Maye', positon: 'forward', isCaptain: true }
undefined
Challenge Information:
Build a Set of Football Team Cards - Build a Set of Football Team Cards
