javascript - 尝试在按钮中使用数据详细信息但出现意外错误

Question

我使用以下代码在屏幕上显示数据库中的项目。我尝试使用数据详细信息向每个按钮添加一个按钮，因为这就是我通过本地存储传递数据的方式。但是，当我运行此代码时，我收到一条错误消息，其中 html += 行中包含 unexpected {，您能不这样做吗？

function display(results) {
    article = document.getElementById("homeArticle");
    var html = '';
    for (var i = 0; i < results.length; i++){ 
        var item = results[i];

        var name = item.P_NAME;
        var description = item.P_DESCRIPTION;
        var price = item.P_PRICE;
        var quant = item.P_QUANTITY;
            // next I add to the string that we want to place on the page
        html += '<section id="homePageSection"><div id="test"> <p>Name: ' + name + '</p><p>Description: ' + description + '</p><p>Price: £' + price + '</p><p>Quantity: ' + quant + '</p><button data-detail='{"name":"banana", "cost": "19"}'>Bananas</button></div></section>';   
    };
    article.innerHTML = html;
}


function getItems() {
    var xhr = new XMLHttpRequest();
    xhr.onload = function() {
        var results = JSON.parse(this.responseText);
        display(results.rows);
    };
    xhr.open("GET", "displayData.php");
    xhr.send();
}

window.addEventListener("load", getItems);

Answer 1

您需要使用反斜杠转义字符串对象周围的 '。

像这样

'<button data-detail=\'{"name":"banana", "cost": "19"}\'>Bananas</button>'