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

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 >${player}</p>`;
      }
    })
  })
}

updateResult("")

<div >
  <div >
    <div >
      <input oninput="updateResult(this.value)" type="search"  placeholder="Search..." />
    </div>
  </div>
  <div >
    <div ></div>
  </div>
</div>

CodePudding user response：

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  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 >
  <div >
    <div >
      <input oninput="updateResult(this.value)" type="search"  placeholder="Search..." />
    </div>
  </div>
  <div >
    <div ></div>
  </div>
</div>