Отображение данных выбранного элемента, собранных из файла json

У меня есть файл 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.info(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.info(err));

    });

автомобили.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"
  }
]
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.
Концепция локализации и ее применение в приложениях React ⚡️
Концепция локализации и ее применение в приложениях React ⚡️
Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...
Безумие обратных вызовов в javascript [JS]
Безумие обратных вызовов в javascript [JS]
Здравствуйте! Юный падаван 🚀. Присоединяйся ко мне, чтобы разобраться в одной из самых запутанных концепций, когда вы начинаете изучать мир...
Система управления парковками с использованием HTML, CSS и JavaScript
Система управления парковками с использованием HTML, CSS и JavaScript
Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...
JavaScript Вопросы с множественным выбором и ответы
JavaScript Вопросы с множественным выбором и ответы
Если вы ищете платформу, которая предоставляет вам бесплатный тест JavaScript MCQ (Multiple Choice Questions With Answers) для оценки ваших знаний,...
0
0
32
2
Перейти к ответу Данный вопрос помечен как решенный

Ответы 2

Ответ принят как подходящий

Проверьте, соответствует ли 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;

})

Это было очень быстро и в основном полезно. Огромное спасибо. Это сработало. Как, по-вашему, я могу динамически включать автомобильные номерные знаки в html вместо их жесткого кодирования?

kajoe14 15.04.2019 23:09

Переберите элементы option и установите value и textContent каждого из них на пластину с одним и тем же индексом.

Jack Bashford 15.04.2019 23:11

Отфильтруйте 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;

 })

Другие вопросы по теме