How can I fix problem in my select option?

Question

I have created an array of football team members. All players are listed here. This array is filtered by categories (position). For example, when you select a striker, the striker players are ranked. But when I press the 'secin' option again, all players should be visible. I don't see anything. That is, when the select option was selected by default again, all should be sorted. What is the problem? What should I give to the "secin" option so that when I select it, the entire array will appear by default. Please help me and fix my code

const team_list=[
    {
      "id": 1,
      "name": "Altay Bayındır",
      "number": "#1",
      "position": "Kaleci",
      "image": "assets/image/altayportre.png",
    },
    {
        "id": 2,
        "name": "İrfan Can Eğribayat",
        "number": "#70",
        "position": "Kaleci",
        "image": "assets/image/irfancan_portre.png",
    },
    {
        "id": 3,
        "name": "Osman Ertuğrul Çetin",
        "number": "#54",
        "position": "Kaleci",
        "image": "assets/image/etoportre_1.png",
    },
    {
        "id": 4,
        "name": "Atilla Szalai",
        "number": "#41",
        "position": "Defans",
        "image": "assets/image/atiportre.png",
    },
    {
        "id": 5,
        "name": "Serdar Aziz",
        "number": "#4",
        "position": "Defans",
        "image": "assets/image/serdarportre.png",
    },
    {
        "id": 6,
        "name": "Gustavo Henrique",
        "number": "#2",
        "position": "Defans",
        "image": "assets/image/gustavoprorte.png",
    },
    {
        "id": 7,
        "name": "Luan Peres",
        "number": "#28",
        "position": "Defans",
        "image": "assets/image/peresportre.png",
    },
    {
        "id": 8,
        "name": "Bright Osayi-Samuel",
        "number": "#21",
        "position": "Defans",
        "image": "assets/image/osayiportre.png",
    },
    {
        "id": 9,
        "name": "Samet Akaydın",
        "number": "#3",
        "position": "Defans",
        "image": "assets/image/Shape.png",
    },
    {
        "id": 10,
        "name": "Ferdi Kadıoğlu",
        "number": "#7",
        "position": "Defans",
        "image": "assets/image/ferdiportre.png",
    },
    {
        "id": 11,
        "name": "Ezgjan Alioski",
        "number": "#6",
        "position": "Defans",
        "image": "assets/image/alioskivesikalik.png",
    },
    {
        "id": 12,
        "name": "Mauricio Lemos",
        "number": "#29",
        "position": "Defans",
        "image": "assets/image/lemosportre.png",
    },
    {
        "id": 13,
        "name": "Nazım Sangare",
        "number": "#30",
        "position": "Defans",
        "image": "assets/image/nazimportre.png",
    },
    {
        "id": 14,
        "name": "Çağatay Kurukalıp",
        "number": "#33",
        "position": "Defans",
        "image": "assets/image/cagtaykurkalip_portre.png",
    },
    {
        "id": 15,
        "name": "Willian Arao",
        "number": "#5",
        "position": "Ortasaha",
        "image": "assets/image/araoportre.png",
    },
    {
        "id": 16,
        "name": "Miguel Crespo",
        "number": "#27",
        "position": "Ortasaha",
        "image": "assets/image/crespoportre.png",
    },
    {
        "id": 17,
        "name": "Mert Hakan Yandaş",
        "number": "#8",
        "position": "Ortasaha",
        "image": "assets/image/mertportre.webp",
    },
    {
        "id": 18,
        "name": "Miha Zajc",
        "number": "#26",
        "position": "Ortasaha",
        "image": "assets/image/zajcportre.webp",
    },
    {
        "id": 19,
        "name": "İrfan Can Kahveci",
        "number": "#17",
        "position": "Ortasaha",
        "image": "assets/image/kahveciportre.webp",
    },
    {
        "id": 20,
        "name": "Arda Güler",
        "number": "#10",
        "position": "Ortasaha",
        "image": "assets/image/ardaportre.webp",
    },
    {
        "id": 21,
        "name": "Lincoln Henrique",
        "number": "#18",
        "position": "Ortasaha",
        "image": "assets/image/lincolnportre.webp",
    },
    {
        "id": 22,
        "name": "Armindo  Bruma",
        "number": "#22",
        "position": "Ortasaha",
        "image": "assets/image/brumaportre.webp",
    },
    {
        "id": 23,
        "name": "İsmail Yüksek",
        "number": "#80",
        "position": "Ortasaha",
        "image": "assets/image/ismailportre.webp",
    },
    {
        "id": 24,
        "name": "Emre Mor",
        "number": "#9",
        "position": "Ortasaha",
        "image": "assets/image/emreportre.webp",
    },
    {
        "id": 25,
        "name": "Isak Vural",
        "number": "#16",
        "position": "Ortasaha",
        "image": "assets/image/isakportre.webp",
    },
    {
        "id": 26,
        "name": "Diego Rossi",
        "number": "#9",
        "position": "Forvet",
        "image": "assets/image/rossiportre.webp",
    },
    {
        "id": 27,
        "name": "Enner Valencia",
        "number": "#13",
        "position": "Forvet",
        "image": "assets/image/valencia.webp",
    },
    {
        "id": 28,
        "name": "Joao Pedro",
        "number": "#20",
        "position": "Forvet",
        "image": "assets/image/portrefutbolcular-(18).webp",
    },
    {
        "id": 29,
        "name": "Joshua King",
        "number": "#15",
        "position": "Forvet",
        "image": "assets/image/kingportre.webp",
    },
    {
        "id": 30,
        "name": "Michy Batshuayi",
        "number": "#23",
        "position": "Forvet",
        "image": "assets/image/michy_basthuayi.webp",
    },
    {
        "id": 31,
        "name": "Serdar Dursun",
        "number": "#19",
        "position": "Forvet",
        "image": "assets/image/dursunportre.webp",
    }
  ];



const { localStorage } = window;
const new_player_list = team_list.map(row => {
    return {
        id: row.id,
        image: row.image,
        position: row.position,
        name: row.name,
        number: row.number
    }
});
let card_item = '';
let all_team = document.getElementsByClassName('all_team');
for (let player of new_player_list) {
    card_item += `<div class="card col-lg-3 col-md-6 col-sm-6 col-12" style="width: 18rem;">
            <img class="card-img-top" src="${player.image}" alt="Card image cap">
            <div class="card-body">
              <h5 class="card-title">${player.name}</h5>
              <p class="card-text">${player.position}</p>
              <span class="number-player">${player.number}</span>
            </div>
        </div>`
}
all_team[0].innerHTML = card_item;
let position_data = [
    { position: "Kaleci" },
    { position: "Defans" },
    { position: "Ortasaha" },
    { position: "Forvet" }
]
let position_select = document.querySelector('#position_select');

let option = `<option value=''>Secin</option>`;


for (let row of position_data) {
    option += `<option>${row.position}</option>`;
}
position_select.innerHTML = option;

function getValue(current_input) {
    const { value } = current_input;
    let card_item2 = '';
    let find_player_data = team_list.filter(row => row.position == value);
    for (let player of find_player_data) {
        card_item2 += `<div class="card col-lg-3 col-md-6 col-sm-6 col-12" style="width: 18rem;">
                <img class="card-img-top" src="${player.image}" alt="Card image cap">
                <div class="card-body">
                  <h5 class="card-title">${player.name}</h5>
                  <p class="card-text">${player.position}</p>
                  <span class="number-player">${player.number}</span>
                </div>
            </div>`
    }
    all_team[0].innerHTML = card_item2;
}

Answer 1

I think the solution here is that you are not resetting the innerHTML of the all_team element when the "secin" option is selected. Add logic that checks if the value of the select element is equal to "secin" and then reset the innerHTML of the element.This should have them all showing up the way you want.

if (value === "secin") {
    all_team[0].innerHTML = card_item;
}