在 javascript 中使用来自 API 的数据

Question

我正在使用北风 API。我从 api 获得的一些产品的名称中有 ' ，这是一个问题，因为我想在函数内部使用它......我想要函数购买发送成本、产品名称和单位数量，但是当我调用函数时，我得到html里面代替<button onclick='buy(4,"Chef Anton's Cajun Seasoning",22.0000)'>Buy</button>我尝试使用单引号，双引号，在之间切换，尝试使用 \' 和 \" 以及 ' 和 " 的不同变体，但没有任何接缝可以工作......这是困扰我的代码行的一部分<button onclick ='buy(" + products.value[j].ProductID + ",'" + (products.value[j].ProductName)+"',"+ products.value.UnitPrice +")'>Buy</button></div></div>"我使用的 Northwind api 也是https://services.odata.org/V3/Northwind/Northwind.svc/Products?$format=json

Answer 1

您可以使用 HTML5data-*自定义属性将任意数据传递给事件处理程序。

'<button data-product-id="' + products.value[j].ProductID '+" data-product-name="' + products.value[j].ProductName'+" data-unit-price="' + products.value.UnitPrice'+" onclick="wrapperBuy(this)">Buy</button>'

稍后可以使用属性获取Element.dataset

function wrapperBuy(element) {

  var productId = element.dataset.productId,

    productName = element.dataset.productName,

    unitPrice = element.dataset.unitPrice;

  console.log(productId, productName, unitPrice);

  //You can invoke the original buy method

  //buy(productId, productName, unitPrice)

}

<button data-product-id="4" data-product-name="Chef Anton's Cajun Seasoning" data-unit-price="2200" onclick="wrapperBuy(this)">Buy</button>

此外，我强烈建议您使用不显眼的事件处理程序，即 addEventListener()

Answer 2

试试这个

<button onclick ="buy(\'' + products.value[j].ProductID + '\',\'' + (products.value[j].ProductName) + '\',\'' + products.value.UnitPrice + '\')">Buy</button>