限制JSON文件中的下拉

Question

我想将我的json文件解析到selectbox中，但我只想在下拉列表中一个值，而不是同一键的重复。

{
    "car_make": "CADILLAC",
    "model": "CTS SPORTS WAGON MANUAL V8 RWD SUPERCHARGED",
    "engine_capacity": 6200.0,
    "body_type": "S/WAGON",
    "crsp": 5280463.0
  },
  {
    "car_make": "CADILLAC",
    "model": "CTS V WAGON MANUAL V8 RWD SUPERCHARGED",
    "engine_capacity": 6200.0,
    "body_type": "S/WAGON",
    "crsp": 8767560.0
  },
  {
    "car_make": "CADILLAC",
    "model": "STS MANUAL V8 AWD",
    "engine_capacity": 3600.0,
    "body_type": "SAL",
    "crsp": 6507501.0
  },
  {
    "car_make": "CADILLAC",
    "model": "DTS AUTO V8",
    "engine_capacity": 4600.0,
    "body_type": "SAL",
    "crsp": 6424919.0
  },
  {
    "car_make": "CADILLAC",
    "model": "SRX CROSSOVER FWD AUTO MANUAL V6",
    "engine_capacity": 3000.0,
    "body_type": "SUV",
    "crsp": 4764322.0
  },
  {
    "car_make": "CADILLAC",
    "model": "ESCALADE V8 AWD AUTO",
    "engine_capacity": 6200.0,
    "body_type": "SUV",
    "crsp": 8733788.0
  },
  {
    "car_make": "CADILLAC",
    "model": "ESCALADE HYBRID AUTO 2WD SFI RWD HYBRID",
    "engine_capacity": 6000.0,
    "body_type": "SUV",
    "crsp": 10203756.0
  },
  {
    "car_make": "CADILLAC",
    "model": "ESCALADE ESV AUTO V8 AWD",
    "engine_capacity": 6200.0,
    "body_type": "SUV",
    "crsp": 9095086.0
  },
  {
    "car_make": "CADILLAC",
    "model": "ESCALADE EXT AUTO V8 AWD",
    "engine_capacity": 6200.0,
    "body_type": "SUV",
    "crsp": 8555347.0
  }

在这种情况下，我只希望car_make成为下拉列表中的一个，以免凯迪拉克出现多次，希望您能得到试图提出的内容。我尝试使用JavaScript和烧瓶。

Answer 1

您可以使用数组＃映射和数组＃过滤器的混合物获取唯一的car_make S：

let data = [{
    "car_make": "CADILLAC",
    "model": "CTS SPORTS WAGON MANUAL V8 RWD SUPERCHARGED",
    "engine_capacity": 6200.0,
    "body_type": "S/WAGON",
    "crsp": 5280463.0
  },
  {
    "car_make": "CADILLAC",
    "model": "CTS V WAGON MANUAL V8 RWD SUPERCHARGED",
    "engine_capacity": 6200.0,
    "body_type": "S/WAGON",
    "crsp": 8767560.0
  },
  {
    "car_make": "CADILLAC",
    "model": "STS MANUAL V8 AWD",
    "engine_capacity": 3600.0,
    "body_type": "SAL",
    "crsp": 6507501.0
  },
  {
    "car_make": "CADILLAC",
    "model": "DTS AUTO V8",
    "engine_capacity": 4600.0,
    "body_type": "SAL",
    "crsp": 6424919.0
  },
  {
    "car_make": "CADILLAC",
    "model": "SRX CROSSOVER FWD AUTO MANUAL V6",
    "engine_capacity": 3000.0,
    "body_type": "SUV",
    "crsp": 4764322.0
  },
  {
    "car_make": "CADILLAC",
    "model": "ESCALADE V8 AWD AUTO",
    "engine_capacity": 6200.0,
    "body_type": "SUV",
    "crsp": 8733788.0
  },
  {
    "car_make": "CADILLAC",
    "model": "ESCALADE HYBRID AUTO 2WD SFI RWD HYBRID",
    "engine_capacity": 6000.0,
    "body_type": "SUV",
    "crsp": 10203756.0
  },
  {
    "car_make": "CADILLAC",
    "model": "ESCALADE ESV AUTO V8 AWD",
    "engine_capacity": 6200.0,
    "body_type": "SUV",
    "crsp": 9095086.0
  },
  {
    "car_make": "CADILLAC",
    "model": "ESCALADE EXT AUTO V8 AWD",
    "engine_capacity": 6200.0,
    "body_type": "SUV",
    "crsp": 8555347.0
  }
];
let result = data
  .map(item => item.car_make)
  .filter((item, index, array) => {
    return array.indexOf(item) === index;
  });
console.log(result);