Question

我想遍历JSON数组以搜索关键字。我指的是this thread to achieve this.

entries是结构的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（）命令放在函数中，但再次在控制台上什么也没有。

Answer 1

假定每个对象内部没有任何深度嵌套的对象或数组，则可以使用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>

Answer 2

这是简单的演示：

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>

在vue.js中循环JSON数组时出现问题

2 个答案: