Live filter/search of an array of objects doesn't work JS

Question

I can't seem to get this block of code to work. Any suggestions on how I can get it to work? It works if it's only an array, but when I make objects inside it doesn't show anything.

So could the problem be that the code dosent reach the objects? So could the problem be that the code dosent reach the objects? Error message

const playersArray = [{
    name: 'Darwin Núñez',
    number: 27,
    age: 23,
    position: 'Forward',
    image: 'nunez.png'
  },
  {
    name: 'Mohamed Salah',
    number: 11,
    age: 30,
    position: 'Midfielder',
    image: 'salah.png'
  },
  {
    name: 'Diogo Jota',
    number: 20,
    age: 25,
    position: 'Forward',
    image: 'jota.png'
  },
];

function updateResult(query) {
  let resultList = document.querySelector(".result");
  resultList.innerHTML = "";
  playersArray.map(function(player) {
    query.split(" ").map(function(word) {
      if (player.toLowerCase().indexOf(word.toLowerCase()) != -1) {
        resultList.innerHTML += `<p class="list-group-item">${player}</p>`;
      }
    })
  })
}

updateResult("")

<div class="container">
  <div class="col-xs-8 col-xs-offset-2 search-box">
    <div class="input-group">
      <input oninput="updateResult(this.value)" type="search" class="form-control" placeholder="Search..." />
    </div>
  </div>
  <div class="container">
    <div class="list-group result"></div>
  </div>
</div>

Answer 1

So, first we lowercase the query. Then, we filter the array of players by checking each property. Finally, we iterate the results and add them to the p element. Have a nice day :)

const playersArray = [{
    name: 'Darwin Núñez',
    number: 27,
    age: 23,
    position: 'Forward',
    image: 'nunez.png'
  },
  {
    name: 'Mohamed Salah',
    number: 11,
    age: 30,
    position: 'Midfielder',
    image: 'salah.png'
  },
  {
    name: 'Diogo Jota',
    number: 20,
    age: 25,
    position: 'Forward',
    image: 'jota.png'
  },
];

let resultList = document.querySelector(".result");

function updateResult(query) {
  if (query.length == 0) {
    resultList.innerHTML = "";
    return;
  }
  
  query = query.toLowerCase();

  let player = playersArray.filter(el => 
    el.name.toLowerCase().indexOf(query) != -1
    || el.number.toString().indexOf(query) != -1
    || el.age.toString().indexOf(query) != -1
    || el.position.toLowerCase().indexOf(query) != -1
    || el.image.toLowerCase().indexOf(query) != -1
  );
  resultList.innerHTML = "";
  player.forEach((data, index) => {
    resultList.innerHTML += `
      <div class="list-group-item" style="border: 1px solid black; margin-top: 2px;">
        <div>Name: ${data.name}<div>
        <div>Id: ${data.number}<div>  
        <div>Age: ${data.age}<div>  
        <div>Position: ${data.position}<div> 
        <div>Image: ${data.image}<div> 
      </div>`;
  })
}

updateResult("")

<div class="container">
  <div class="col-xs-8 col-xs-offset-2 search-box">
    <div class="input-group">
      <input oninput="updateResult(this.value)" type="search" class="form-control" placeholder="Search..." />
    </div>
  </div>
  <div class="container">
    <div class="list-group result"></div>
  </div>
</div>