我正在构建一个用于练习的天气应用程序。我到了这一点,我必须使用来自JSON对象的数据创建一个自动完成输入字段。当有人进行输入时,它会显示匹配的数据,但是单击后,我想从对象中获得两个属性。我需要从JSON对象获取经度和纬度属性,以发出API请求以返回带有天气数据的对象。内容正确显示,但是我无法使onClick事件侦听器正常工作。我尝试了非常不同的尝试,但均失败了,可能是示波器问题或其他问题。这是我的第一个项目,而我现在正处于崩溃之中。请帮我。 :)
P.S。您可以在以下链接上找到它: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));
答案 0 :(得分:1)
如果我理解正确,则您正在尝试访问所单击匹配项的lat
和lng
值,如果是这种情况,这是一种解决方法:
const outputHtml = matches => {
if (matches.length > 0) {
const html = matches
.map(
match => `<div class="card match card-body mb-1" data-lat="`${match.lat}" data-lng="`${match.lng}">
<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.querySelectorAll('.match').forEach(matchElm => {
matchElm.addEventListener('click', function(event) {
const { currentTarget } = event;
const { lat, lng } = currentTarget.dataset;
});
});
}
};
我已经使用data-lat
和data-lng
属性将所需的值存储在元素的dataset
中,并且我已经使用document.querySelectorAll('.match')
来获取所有具有match
类,而不仅仅是第一个。