У меня есть файл 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"
}
]



![Безумие обратных вызовов в javascript [JS]](https://i.imgur.com/WsjO6zJb.png)


Проверьте, соответствует ли 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;
})Переберите элементы option и установите value и textContent каждого из них на пластину с одним и тем же индексом.
Отфильтруйте 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;
})
Это было очень быстро и в основном полезно. Огромное спасибо. Это сработало. Как, по-вашему, я могу динамически включать автомобильные номерные знаки в html вместо их жесткого кодирования?