为什么当用户单击按钮时我无法显示我想要的数据

Question

我正在制作一个简单的搜索自动填充应用程序，用于搜索城市及其信息。

问题是当点击建议时，我希望在不同的 html 元素中显示城市信息。

所以我的 javascript 代码是：

let search=document.getElementById("search");
let searchlist=document.getElementById("searchlist");
search.addEventListener("input",()=>searchcities(search.value));

const searchcities=async searchtext=>{
    var res= await fetch("in.json");
    const cities=await res.json();
    
    
    let matches=cities.filter(city=>{
        const regex=new RegExp(`^${searchtext}`,'gi');
        return city.city.match(regex);
    });
    if(searchtext.length===0){
        matches=[];
        searchlist.innerHTML="";
    }
    outputHTML(matches);
};
function outputHTML(matches){
    if(matches.length>0){
        const html=matches.map(match=>`
        <button class="card" >
        <h4>${match.city}<span class="state ">(${match.admin})</span></h4>
        <small>Latitude: ${match.lat}<br>longitude:${match.lng}</small>
        </button>
        `).join("");
        searchlist.innerHTML=html;
        document.querySelector(".card").addEventListener("click",showresult)
        function showresult(match){
            let result=document.querySelector("#finalresult");
            const show=`
            <div class="result">
            <h4>${match.city}<span class="state ">(match.admin})</span></h4>
            <small>Latitude: ${match.lat}<br>longitude:${match.lng}</small>
            </div>
            `;
            result.innerHTML=show;
            console.log(result);
        }
        }
    
}

我希望这个功能起作用：

function showresult(match){
            let result=document.querySelector("#finalresult");
            const show=`
            <div class="result">
            <h4>${match.city}<span class="state ">(match.admin})</span></h4>
            <small>Latitude: ${match.lat}<br>longitude:${match.lng}</small>
            </div>
            `;
            result.innerHTML=show;
            console.log(result);
        }
        }

但它给了我未定义的数据。我不知道该怎么办。

json文件的结构是这样的：

{ “城市”：“孟买”， “管理员”：“马哈拉施特拉邦”， “国家”：“印度”， "population_proper": "12691836", “iso2”：“输入”， “资本”：“管理员”， “纬度”：“18.987807”， “液化天然气”：“72.836447”， “人口”：“18978000” }

感谢您的帮助。

Answer 1

你自己让它变得复杂，因为它实际上是什么。您是否考虑过数据属性？这是一个例子：

//Fetch function
const searchCities = async searchText => {
    if(searchText == null) return;

    let matches;
    if(searchText.length < 1) matches = []; //current behaviour will set it to no matches when your removed everything from the input
    else {
        const res = await fetch('js/in.json');
        const cities = await res.json();
        
        matches = await cities.filter(city=>{
            const regex=new RegExp(`^${searchText}`,'gi');
            return city.city.match(regex);
        });
    }

    outputHTML(matches);

};

//Inner function
const outputHTML = (matches) => {
    if(matches == null) return;

    let html = '<p>no matches</p>';
    if(matches.length !== 0) {
        html = matches.map(match => `
        <button class="card" data-city="${match.city}" data-admin="${match.admin}" data-lat="${match.lat}" data-lng="${match.lng}">
        <h4>${match.city}<span class="state ">(${match.admin})</span></h4>
        <small>Latitude: ${match.lat}<br>longitude:${match.lng}</small>
        </button>
        `).join('');
    }

    const searchlist = document.getElementById("searchlist");
    searchlist.innerHTML = html;

    const cards = document.querySelectorAll(".card");
    cards.forEach(card => card.addEventListener("click", showResult));
};

//Click card function
const showResult = (event) => {
    const card = event.currentTarget;
    const result = document.querySelector('#finalresult');
    const cardData = card.dataset;

    const show = `
        <div class="result">
            <h4>${cardData.city}<span class=""state">${cardData.admin}</span></h4>
            <small>Latidude: ${cardData.lat}<br>longitude:${cardData.lng}</small>
        </div>
    `;
    result.innerHTML = show;
};

//Setup
const setup = () => {
    const search = document.getElementById("search");
    search.addEventListener("input",()=>searchCities(search.value));
};

//Load
window.addEventListener('load', setup);

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Indian cities</title>
    <script src="js/main.js"></script>
</head>
<body>
<div class="indian-flag">
    <div class="1"></div>
    <div class="2"></div>
    <div class="3"></div>
</div>
<div class="head">CITIES lookup</div>
<input type="text" name="" id="search" class="input" placeholder="Enter city name...">
<div id="searchlist"></div>
<div id="finalresult"></div>
</body>
</html>