Я создаю приложение погоды для практики.Я дошел до того, что мне нужно заполнить поле ввода автозаполнением данными из объекта JSON.Когда кто-то делает ввод, он отображает совпадающие данные, но при нажатии я хочу получить два свойства от объекта.Мне нужно получить свойства долготы и широты от объекта JSON, чтобы сделать запрос API для возврата объекта с данными о погоде.Содержимое отображается правильно, но я не могу заставить работать прослушиватель событий onClick.Я пробовал очень разные вещи и потерпел неудачу, либо была проблема с объемом, либо что-то еще.Это один из моих первых проектов, и я сейчас нахожусь в упадке.Пожалуйста, помогите мне.:)
PS Вы можете найти его по этой ссылке: https://objective -edison-1d6da6.netlify.com /
// Testing
const search = document.querySelector('#search');
const matchList = document.querySelector('#match-list');
let states;
// Get states
const getStates = async () => {
const res = await fetch('../data/bg.json');
states = await res.json();
};
// Filter states
const searchStates = searchText => {
// Get matches to current text input
let matches = states.filter(state => {
const regex = new RegExp(`^${searchText}`, 'gi');
return state.city.match(regex);
});
// Clear when input or matches are empty
if (searchText.length === 0) {
matches = [];
matchList.innerHTML = '';
}
outputHtml(matches);
};
// Show results in HTML
const outputHtml = matches => {
if (matches.length > 0) {
const html = matches
.map(
match => `<div class="card match card-body mb-1">
<h4>${match.city}
<span class="text-primary">${match.country}</span></h4>
<small>Lat: ${match.lat} / Long: ${match.lng}</small>
</div>`
)
.join('');
matchList.innerHTML = html;
document.querySelector('.match').addEventListener('click', function() {});
//Wconsole.log(matches);
//let test = document.querySelectorAll('#match-list .card');
//const values = matches.values(city);
}
};
window.addEventListener('DOMContentLoaded', getStates);
search.addEventListener('input', () => searchStates(search.value));