javascript - 限制来自 JSON 文件的下拉菜单

Question

我想将我的 JSON 文件解析为一个选择框，但我希望下拉列表中只有一个值，而不是相同 KEY 的重复值。

{
    "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 成为下拉列表中的一个，这样 cadillac 就不会出现多次，希望你明白我想问的问题。我尝试使用 Javascript 和 flask 。

Answer 1

您可以混合使用 Array#map和 Array#filter获得独特的 car_make:

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);