I am trying to get ID from an API (ID: food.slug) now as the value of the ID is string I am getting an error. index.html:1 Uncaught ReferenceError: apple_iphone_13_pro_max is not defined at HTMLButtonElement.onclick

This is the code

const showitem = (foods) => {
    const parent = document.getElementById('parent');
    for (const food of foods) {

        const newdiv = document.createElement('div');
        newdiv.classList.add('col')
        newdiv.innerHTML = `
      
        <div class="card" >
            <img src="${food.image}" class="card-img-top" alt="...">
            <div class="card-body">
                <h5 class="card-title">Card title</h5>
                <p class="card-text">This is a longer card with supporting text below as a natural lead-in to
                    additional content. This content is a little bit longer.</p>
            </div>

            <button onclick="singleitem(${food.slug})">details</button>
        </div>`;
        console.log(food.slug);

        parent.appendChild(newdiv);

   }
}