显示从json文件收集的选定元素的数据

Question

我有一个JSON文件，其中包含车牌号码及其各自的值。HTML包含一个Select标记，其中包含来自JSON文件(硬编码)的车牌。如何显示所选车牌中的汽车内容。

index.html

<select class="u-full-width" id="search-plate">
  <option value="">Select License Plate</option>
  <option value="CIL-184">CIL-184</option>
  <option value="SKI-167">SKI-167</option>
  <option value="KGB-345">KGB-345</option>
  <option value="CDG-876">CDG-876</option>
  <option value="YTR-765">YTR-765</option>
  <option value="MAS-007">MAS-007</option>
</select>

app.js

let search = document.getElementById('search-plate');

  search.addEventListener('change', (e) => {
  console.log(e.target.value);

  fetch('cars.json')
   .then(res => {
      return res.json();
   })
    .then(data => {
       let output = '';
       data.forEach(car => {
          output += `
            <div class="row">
                <div class="six columns">
                    <h4>${car.Make}</h4>
                </div> 
                <div class="six columns">
                    <h4>${car.Plate}</h4>
                </div>
            </div>
            `;

        });

      document.getElementById('search-list').innerHTML = output;

     })
      .catch(err => console.log(err));

    });

cars.json

    let cars = [{
    "Make": "Audi",
    "Model Year": "2009 Audi A3",
    "Plate": "CIL-184",
    "Classification": "Automatic transmission",
    "Year": 2009,
    "Color": "Black",
    "Price": 80000,
    "Wiki": "http://en.wikipedia.org/wiki/Audi_S5#Audi_S5"
  },
  {
    "Make": "Porsche",
    "Model Year": "911",
    "Plate": "SKI-167",
    "Classification": "Automatic transmission",
    "Year": 2019,
    "Color": "Silver",
    "Price": 135000,
    "Wiki": "http://en.wikipedia.org/wiki/Porsche_997"
  },
  {
    "Make": "Nissan",
    "Model Year": "GT-R",
    "Plate": "KGB-345",
    "Classification": "Automatic transmission",
    "Year": 2016,
    "Color": "BlUE",
    "Price": 70000,
    "Wiki": "http://en.wikipedia.org/wiki/Nissan_Gt-r"
  },
  {
    "Make": "BMW",
    "Model Year": "M3",
    "Plate": "CDG-876",
    "Classification": "Automatic transmission",
    "Year": 2010,
    "Color": "Black",
    "Price": 60500,
    "Wiki": "http://en.wikipedia.org/wiki/Bmw_m3"
  },
  {
    "Make": "Audi",
    "Model Year": "S5",
    "Plate": "YTR-765",
    "Classification": "Automatic transmission",
    "Year": 2009,
    "Color": "Red",
    "Price": 53000,
    "Wiki": "http://en.wikipedia.org/wiki/Audi_S5#Audi_S5"
  },
  {
    "Make": "Audi",
    "Model Year": "TT",
    "Plate": "MAS-007",
    "Classification": "Automatic transmission",
    "Year": 2008,
    "Color": "White",
    "Price": 40000,
    "Wiki": "http://en.wikipedia.org/wiki/Audi_TT"
  }
]

Answer 1

检查当前汽车的Plate是否与所选的匹配：

​

.then(data => {
  let output = '';
  data.forEach(car => {
    if (car.Plate == search.value) {
      output += `<div class="row"><div class="six columns"><h4>${car.Make}</h4></div> <div class="six columns"><h4>${car.Plate}</h4></div></div>`;
    }

  });

  document.getElementById('search-list').innerHTML = output;

})

​

Answer 2

在创建输出之前过滤data。就像这样。

.then(data => {
   let output = '';
   data.filter(car => car.plate === search.value)
    .forEach(car => {
      output += `
        <div class="row">
            <div class="six columns">
                <h4>${car.Make}</h4>
            </div> 
            <div class="six columns">
                <h4>${car.Plate}</h4>
            </div>
        </div>
        `;

    });

  document.getElementById('search-list').innerHTML = output;

 })

或者甚至是这种方式。

.then(data => {
   let output = 
   data.filter(car => car.plate === search.value)
    .map(car => 
      `
        <div class="row">
            <div class="six columns">
                <h4>${car.Make}</h4>
            </div> 
            <div class="six columns">
                <h4>${car.Plate}</h4>
            </div>
        </div>
        `;

    ).join('');

  document.getElementById('search-list').innerHTML = output;

 })