Question

我是javascript的初学者，遇到以下问题。我在脚本中调用警报时的输出数据为[对象对象]。单击按钮（onClick）会调用以下函数。数组中有[Object object]个元素。我的意思是，innerHtml的最后一行代码无法正常工作。

<!DOCTYPE HTML>
<html>

<head>
  <link rel="stylesheet" href="styles.css">
</head>

<body>
  <div class="center">
    <h1 align="center">Shop Basket</h2>
      <script type="text/javascript" src="external.js"></script>

      <table align="center">
        <tr>
          <th align="left">Price</th>
          <th>Product</th>
          <th></th>
        </tr>
        <script>
          let products = [{
              20: "dysk ssd"
            },
            {
              1100: "pralka"
            },
            {
              219: "pad"
            },
            {
              500: "monitor"
            },
            {
              789: "i5 processor"
            },
            {
              88: "soundblaster"
            },
            {
              220: "mysz logitech"
            },
            {
              219: "klawiatura modecom"
            },
            {
              900: "gtx 1060"
            },
            {
              823: "rx 570"
            }
          ];
          let shopBasket = [];

          function addToBasket(value) {
            shopBasket.push(value);
            alert(shopBasket);
            document.getElementById("change").innerHtml = "" + shopBasket.length;
          }
          for (let i = 0; i < products.length; i++) {
            for (let key in products[i]) {
              document.write("<tr>");
              document.write("<td>" + key + "</td>");
              document.write("<td>" + products[i][key] + "</td>");
              document.write('<td><input value="Add to ShopBakset" type="button" onClick="addToBasket(\'' + products[i] + '\')"/></td>');
              document.write("</tr>");
            }
          }
        </script>

      </table>
      <center>
        <a href="html-link.htm"><img src="shopbasket.jpg" title="basket" alt="basket"></a>
      </center>
  </div>
  <p id="change"></p>
</body>

</html>

致谢

Answer 1

我想您需要在HTML文件中执行以下JSON字符串化操作：

document.write('<td><input value="Add to ShopBakset" type="button" onClick="addToBasket(\'' + JSON.stringify(products[i]) +'\')"/></td>');

然后在您的JS代码中添加JSON解析，如下所示：

shopBasket.push(JSON.parse(value));

运行代码段，只需在使用和不使用JSON的情况下写入控制台即可。stringify您可以看到区别：

let products = [ 
    {20: "dysk ssd"}, 
    {1100: "pralka"}, 
    {219: "pad"}, 
    {500: "monitor"},
    {789: "i5 processor"},
    {88: "soundblaster"},
    {220: "mysz logitech"}, 
    {219: "klawiatura modecom"},
    {900: "gtx 1060"}, 
    {823: "rx 570"}
];

for (let i = 0; i < products.length; i++) {
   for (let key in products[i]) {
      console.log('Without using stringifiy', '<td><input value="Add to ShopBakset" type="button" onClick="addToBasket(\'' + products[i] + '\')"/></td>');
      console.log('With using stringifiy', '<td><input value="Add to ShopBakset" type="button" onClick="addToBasket(\'' + JSON.stringify(products[i]) + '\')"/></td>');
   }

   // just to write only the first element
   break;
}

在JavaScript函数中，如果您再次解析字符串：

AddToBasket('{"20":"dysk ssd"}');

function AddToBasket(value) {
  let parsedBasket = JSON.parse(value);
  
  console.log(parsedBasket);
  
  // your code
}

更新：好的，让我们将所有JavaScript代码移动到您的外部文件中，而不必考虑文档的编写，首先向表中添加一个ID：

<table id="productsTable" align="center">

然后从外部JS文件中执行以下操作：

let table = document.getElementById('productsTable');

for (let i = 0; i < products.length; i++) {
    for (let key in products[i]) {
        table.innerHTML += "<tr>";
        table.innerHTML += "<td>" + key + "</td>";
        table.innerHTML += "<td>" + products[i][key] + "</td>";
        table.innerHTML += "<td><input value=\"Add to ShopBakset\" type=\"button\" onClick=\"addToBasket(" + formatProduct(products[i]) + ")\"/></td>";
        table.innerHTML += "</tr>";
    }
}

function formatProduct(product) {
   return JSON.stringify(product).replace(/\"/g, '\'')
}

这将解决您的意外令牌问题。

在您的addToBasket函数中，您可以将结果写入控制台：

function addToBasket(value) { 
   console.log('json object', value);

   // ... your code
}

将打印以下JSON对象：

对象对象是什么意思

1 个答案: