Проблема зацикливания массива JSON в vue.js - PullRequest
Новая
       21

Проблема зацикливания массива JSON в vue.js

0 голосов
/ 25 января 2019

Я хочу перебрать массив JSON для поиска по ключевому слову.Я обновляю этот поток для достижения этой цели.

записей является массивом структуры JSON 

[
    {"a": "something", "id": 54785, "b": ["each", "every", "one"]},
    {"a": "something", "id": 54785, "b": ["each", "every", "one"]},
    {"a": "something", "id": 54785, "b": ["each", "every", "one"]},
]

searchItem из этого пользовательского компонента 

<FormInput type="text"
    v-model="searchItem"
    @input="searchObject()"
    placeholder="Search here">
</FormInput>

Я поместил свою функцию в методы компонента следующим образом. 

searchObject: function() {
  for (var i=0; i<this.entries.length; i++) {
    for (var key in this.entries[i]) {
      if (this.entries[i].key.indexOf(this.searchItem)!==-1) {
        this.result.push(this.entries[i])
      }
    }
  }
  return this.result
}

Я получаю эту ошибку в консоли 

TypeError: Cannot read property 'indexOf' of undefined

Когда я изменяю вычисляемую функцию и пытаюсь [key]вместо .key

searchObject() {
  for (var i=0; i<this.entries.length; i++) {
    for (var key in this.entries[i]) {
      if (this.entries[i][key].indexOf(this.searchItem)!==-1) {
        this.result.push(this.entries[i])
      }
    }
  }
  return this.result
}

Я не получаю ничего в результате, и я не получаю никакой ошибки в консоли.Я попытался добавить команду console.log () в свою функцию, но опять ничего не получилось в консоли.

Ответы [ 2 ]

0 голосов
/ 25 января 2019

Предполагая, что каждый объект не имеет глубоко вложенных объектов или массивов внутри, вы можете использовать Object.values, чтобы получить значения вашего объекта.

С вашими текущими данными возвращаемые значения будут содержать другой массив, поэтому вы должны сгладить его, используя .concat.apply, чтобы объединить значения в один массив.

Использованиезатем вы можете легко проверить, содержит ли текущий объект ваш searchItem.

Редактировать: Если вы хотите включить в результат элемент, если searchItem соответствует определенномучасти значений элементов, вы можете использовать .join, чтобы объединить ваши сведенные значения в строку.

См. пример ниже: 

var app = new Vue({
  el: '#app',
  data: {
    result: [],
    searchItem: '',
    entries: [{
        "a": "something",
        "id": 54785,
        "b": ["one", "two", "three"]
      },
      {
        "a": "nothing",
        "id": 54785,
        "b": ["each", "every", "one"]
      },
      {
        "a": "everything",
        "id": 54785,
        "b": ["each", "every", "one"]
      },
    ]
  },
  methods: {
    searchObject: function() {
      this.result = []; // clear data, for demonstration only, remove if not needed

      for (var i = 0; i < this.entries.length; i++) {
        var values = [].concat.apply([], this.getValues(this.entries[i]));
        
        // you can also convert it to a string to match certain string parts
        values = values.join(',');
        
        if (values.indexOf(this.searchItem) !== -1) {
          this.result.push(this.entries[i])
        }
      }
    },
    getValues: function(object) {
      // use a polyfill in case Object.values is not supported by current browser
      return Object.values ? Object.values(object) : Object.keys(object).map(key => object[key]);
    }
  }
})
<script src="https://cdn.jsdelivr.net/npm/vue"></script>

<div id="app">
  <input type="text" v-model="searchItem" v-on:input="searchObject" placeholder="Search here" />
  <ul>
    <li v-for="i in result">{{i}}</li>
  </ul>
</div>
0 голосов
/ 25 января 2019

вот простая демонстрация: 

var app = new Vue({
  el: '#app',
  data: {
    result:[],
    searchItem:'',
    entries:
     [
{"a": "something", "id": 54785, "b": ["each", "every", "one"]},
{"a": "something", "id": 54785, "b": ["each", "every", "one"]},
{"a": "something", "id": 54785, "b": ["each", "every", "one"]},
]
  },methods:{
    searchObject:function(){
       for (var i=0; i<this.entries.length; i++) {
        for (var key in this.entries[i]) {
            if (key.indexOf(this.searchItem)!==-1) {
            this.result.push(this.entries[i])
            }
        }
      }
      if(this.searchItem && this.searchItem.length>0){
        return this.result;      
      }else{
         return this.result=[];
      }
    }
  }
})
<script src="https://cdn.jsdelivr.net/npm/vue"></script>

<div id="app">
  <input
type="text"
v-model="searchItem"
v-on:input="searchObject"
placeholder="Search here" />
<p>{{'searchItem :'+searchItem}}</p>
<ul>
<li v-for="i in result">{{i}}</li>
</ul>
</div>
...