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

Question

i am making a simple search autocomplete app which search cities and it's information.

the problem is when clicked on suggestion i want that cities information in different html element.

so my javascript code is:

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);
        }
        }
    
}

i want this function to work:

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);
        }
        }

but it is giving me undefined data. I don't know what to do.

the structure of json file is like this:

{ "city": "Mumbai", "admin": "Maharashtra", "country": "India", "population_proper": "12691836", "iso2": "IN", "capital": "admin", "lat": "18.987807", "lng": "72.836447", "population": "18978000" }

thanks for helping.

Answer 1

You're making it yourself to complex for what it actually is. Have you thought about data attributes? Here's an example:

 //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>