获取 JSON 列的数组并检查重复项/VueJS

Question

我有一个包含许多不同列的 JSON 文件，如下所示（我使用的是 BootstrapVue）。

我想要获得一个包含一列的数组，并且我想根据重复项对其进行过滤。

我的 JSON 文件：

[
    { "Number": 111, "Input1": "Good morning", "Input2": "Test1" },
    { "Number": 222, "Input1": "Hello", "Input2": "Test2" },
    { "Number": 333, "Input1": "Good morning", "Input2": "Test2" },
    { "Number": 444, "Input1": "Ciao", "Input2": "Test2" },
    { "Number": 555, "Input1": "Hey", "Input2": "Test2" },
    { "Number": 666, "Input1": "Hey", "Input2": "Test2" }
]

我尝试过滤第 2 列 (Input1) 并检查重复项 - 因此最终数组应如下所示：

data():{
  return {
    Input1 = [{text: 'Good morning'}, {text: 'Hello'}, {text: 'Ciao'}, {text: 'Hey'}]
  }
}

我需要它，因为它用于 b-form-select 字段。

Answer 1

使其成为计算的属性，循环遍历所有值，仅采用 Input1 值，然后过滤重复项，最后映射所有值以具有正确的格式。

类似于：

data: function(){
  return {
    selected: null,
    the_json: [
      { "Number": 111, "Input1": "Good morning", "Input2": "Test1" },
      { "Number": 222, "Input1": "Hello", "Input2": "Test2" },
      { "Number": 333, "Input1": "Good morning", "Input2": "Test2" },
      { "Number": 444, "Input1": "Ciao", "Input2": "Test2" },
      { "Number": 555, "Input1": "Hey", "Input2": "Test2" },
      { "Number": 666, "Input1": "Hey", "Input2": "Test2" }
    ]
  };
},
computed: {
  filtered_from_json: function() {
    let arr = this.the_json.map((v) => v.Input1); // Take only the `Input1` value
    return arr
      .filter((v, idx) => arr.indexOf(v) == idx) // Discard values that are present already (= lower index)
      .map((v) => { return {text: v, value: v}; }); // Transform value into object with property `text` of value
  }
},

和use像这样：<b-form-select v-model="selected" :options="filtered_from_json"></b-form-select>

获取 JSON 列的数组并检查重复项/VueJS

Get array of JSON column and check on duplicates / VueJS

json

vue.js

vuejs2

bootstrap-vue