Show attributes in json file after onclick function on an object

Support APIs
#1

Hello,

so I’m new here and would like some help with my code. I’m trying to make a website where i can filter food dishes and show their nutritions with it. But I would like for the list to show up after I click a dish and to show in another grid.

My data are from a .json file, the file contains the name of the dish and dish information. When input a letter some dishes show up, i would like to create a fuction on click, by clicking selected dish and the list shows up next to it or in another grid (class foodDetails). I’ve this snippet of code where the information shows up with the filtered dish, but i would rather have it shown after selecting the dish.

const search = document.getElementById("searchBar")
const itemList = document.getElementById("foodList")

const searchFood = async searchText => {
    const res = await fetch("../sources/foodList.json");
    const data = await res.json();

    let matches = data.filter(item => {
        const regex = new RegExp(`${searchText}`,'gi'); //upper and lower case
        return item.foodDesc.match(regex);

    });
    console.log(matches)
    if(searchText.length ===0) {
        matches = [];
        itemList.innerHTML='';
    }
    outputHtml(matches);
};

const outputHtml = matches => {
    if(matches.length>0){
        const lookupItem = matches.map(match => `
        <div class="foodInfo">
            <h4>${match.foodDesc}</h4>
                <small><span class="foodDetails">
                    <li>Protein: ${match.Protein}</li>
                    <li>Calories: ${match.Calories}</li>
                    <li>Total Fat: ${match.Total}</li>
                    <li>Amount: ${match.amount1} / ${match.msreDesc1} </li>
                </span></small>
        </div>
        `).join('');
        itemList.innerHTML=lookupItem;
    }
}

search.addEventListener('input',() => searchFood(search.value));

my HTML

<main>
            <div class="container">
                <div class="searchWrapper">
                    <input
                            type="text"
                            name="searchBar"
                            id="searchBar"
                            placeholder="Enter food"
                    />
                </div>
                <div class="content">
                    <aside>
                        <ul id="foodList"></ul>
                    </aside>
                    <main>
                        <div class="foodInfo">
                            <h2>Food Information</h2>
                            <div class="foodDetails">
                                <li></li>
                            </div>
                        </div>
                    </main>
                </div>
            </div>
        </main>

Could someone help me?