Как искать в данных JSON в VUE?

Question

У меня есть файл json, который я отображаю в таблицу, у меня есть 11 столбцов, таких как идентификатор, имя и т. Д., Я хотел бы искать по каждому столбцу, но он работает для одного столбца и когда я начинаю фильтровать данные еще один например, у меня есть сортировка по идентификатору, и после этого я хочу отсортировать по имени, он потерпел крах.

У меня есть v-for структура для рендеринга данных из json

<div class="document__json" v-for="(item,index) in filteredJson" :key="index" >
  <div class="document__data" :title=item.priority>{{item.priority}}</div>
  <div class="document__data" :title=item.refid_number>{{item.refid_number}}</div>
</div>

Я пытаюсь искать через json, используя v-модель, каждое письмо / слово, которое я посылаю в массив

data() {
  return {
    myJson: json,
    search: []
  };
},

filteredJson: function() {
  let new_json;
  return this.myJson.filter((x) => {
    new_json = x;
    console.log(x);
    for (let i in this.search) {
      console.log(new_json[i])
      console.log(this.search)
      new_json = new_json[i].toLowerCase().match(this.search[i].toLowerCase());
    }
    return new_json
  });
}

<input type="text" v-model="search['priority']" class="document_search">
<input type="text" v-model="search['refid_number']" class="document_search">

Я пытаюсь отфильтровать json по сравнению с данными в массиве поиска, но это сработает, если я буду искать по приоритету, только если я попытаюсь выполнить поиск также по refid_number, который заполнит ошибку с ошибкой: Cannot read property 'refid_number' of null"

Answer 1

Внутри функции фильтра сначала вы устанавливаете new_json = x (который является объектом), но затем внутри цикла for вы устанавливаете new_json как результат match, который будет массивом, и он не будет иметь члены в качестве исходного объекта (x), поэтому он будет зависать при следующем цикле.

Я предполагаю, что вам нужно что-то вроде этого:

return this.myJson.filter((x) => {
    let match = true;
    console.log(x);
    for(let i in this.search){
        console.log(x[i])
        console.log(this.search)
        if(!x[i].toLowerCase().match(this.search[i].toLowerCase())) match = false;
    }
    return match;
});