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>

Show your html as well, maybe thats the problem, and also what errors do you get? — Webdeveloper_Jelle, Oct 12 '22 at 12:59
Please provide enough code so others can better understand or reproduce the problem. — Community, Oct 12 '22 at 13:17
Do you mean `player.name.toLowerCase()` instead of `player.toLowerCase()` ? — ThS, Oct 12 '22 at 13:37

acarlstein · Accepted Answer · 2022-10-12T19:55:27.967

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>

Thx, that worked. The only thing thats wierd is that i see the whole object when i search :P — maggyy, Oct 12 '22 at 14:52
@maggyy yes. I just show the whole object because that is how you had it in your code. You are going to have to code that to print it pretty with HTML manually. Do you need me to do it for you or can you do it yourself? — acarlstein, Oct 12 '22 at 15:26
Yes i have tried to give u an upvote but i havent got enough points :/ BUT THANK U SO MUCH, ur an life saver! Ive made a new post if ur up for the task? https://stackoverflow.com/questions/74052327/filter-live-search-not-working-with-module-js — maggyy, Oct 13 '22 at 08:05

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

1 Answers1