почему я не могу показать данные, которые мне нужны, когда пользователь нажимает кнопку

Question

• 1000 мой 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 такая:

{"city": "Mumbai", "admin": "Maharashtra", " country ":" Индия "," population_proper ":" 12691836 "," iso2 ":" IN "," capital ":" admin "," lat ":" 18.987807 "," lng ":" 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>