Vue - How to Filter More Than One Value with Javascript

Question

I have a data table and I want to add a search/filter functionality to it. I managed to do it partially but now I can only filter one element in the array. Here is the array;

    dataArray: [
          { date: "12.02.2021", time: "Aaa", level: '1111', service: 'Zzzz', description: '124-362' },
          { date: "13.02.2021", time: "Bbbb", level: '2222', service: 'Yyyyy', description: '748-987' },
          { date: "14.02.2021", time: "Cccc", level: '3333', service: 'Xxxxx', description: '012-365' },
          { date: "15.02.2021", time: "Dddd", level: '4444', service: 'Qqqqq', description: '271-016' },
          { date: "16.02.2021", time: "Eeee", level: '5555', service: 'Tttt', description: '341-222' },
          { date: "17.02.2021", time: "Ffff", level: '6666', service: 'Uuuu', description: '932-324' },
          { date: "18.02.2021", time: "Gggg", level: '7777', service: 'Vvvvv', description: '459-974' },
          { date: "19.02.2021", time: "Hhhh", level: '8888', service: 'Wwwww', description: '224-569' },
          { date: "20.02.2021", time: "Jjjj", level: '9999', service: 'Mmmm', description: '617-619' },
          { date: "21.02.2021", time: "Kkkk", level: '10101010', service: 'Nnnnn', description: '825-379' },
        ],

And here is the HTML;

          <tr v-for="(dataArray, i) in filteredItems" :key="i">
            <p class="table-iterator">{{i--}}</p>
            <td class="table-row text-left">{{connectivityLogs.date}}</td>
            <td class="table-row text-center">{{connectivityLogs.time}}</td>
            <td class="table-row text-center">{{connectivityLogs.level}}</td>
            <td class="table-row text-center">{{connectivityLogs.service}}</td>
            <td class="table-row text-right">{{connectivityLogs.description}}</td>
          </tr>

There is also an input above <input type="text" v-model="search"> and I defined the search variable in the data section of the Vue script.

And at last, here is how I filter an element (only the time) with the computed property;

computed: {
  filteredItems(){
    return this.dataArray.filter(dataArray => {
      return dataArray.time.toLowerCase().indexOf(this.search.toLowerCase()) > -1
    })
  }
}

My question is, how can I do the filtering operation for all of them? Now I can only filter the time.

Do you mean you can only filter one property of the objects in the array? In this instance, the time — Djave
use Object.keys on dataArray inside the filter, or use a bunch of ||'s — Lawrence Cherone
Does this answer your question? How to use filter to search in multiple key values of objects in an array? — Lawrence Cherone
Ayrıca indexOf > -1 yerinde direk includes da kullanabilirsin :) — halilcakar
You can try like stackoverflow.com/questions/66685931/…. Hopefully it will helps you — Jebasuthan

Djave Djave · Accepted Answer · 2021-03-19T13:49:35

This answer assumes you want one search box that can search all fields.

Search each field for a value:

computed: {
  filteredItems(){
    return this.dataArray.filter(dataArray => {
      return Object.values(dataArray).some(value => {
        value.toLowerCase().indexOf(this.search.toLowerCase()) > -1
      })
    })
  }
}

The above uses Object.values() to grab the values of each object as an array, before checking if some() of the fields contain the search text.

Vue - How to Filter More Than One Value with Javascript

1 Answers

Search each field for a value: