如何使用Json中的Ajax将数组设置为列来构建HTML表？

Question

我有如下JSON数据：

{
  "produk": [
    {
      "id": "6",
      "stock": {
        "M": "2",
        "S": "3",
        "L": "9"
      },
    },
    ...
   ]
}

我想在表中显示JSON数据，如下所示：

但我对“股票”栏有疑问。我在分类库存数据时遇到了困难。请帮助JSON中的数据成为我期望的合适表。

Answer 1

您可以通过预先构建表并使JSON变量可用来生成此项。

produk = {
  "produk": [
    {
      "id": "6",
      "stock": {
        "M": "2",
        "S": "3",
        "L": "9"
      }
    }
  ]
}["produk"][0];

$(".id").html(produk.id);
$(".M").html(produk.stock.M);
$(".S").html(produk.stock.S);
$(".L").html(produk.stock.L);

td,tr,table {
  border:1px solid black;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table class="jsTable">
  <tr><td rowspan="2">ID</td><td colspan="3" data-id="id">Stock</td></tr>
  <tr><td>S</td><td>M</td><td>L</td></tr>
  <tr><td class="id">id</td><td class="S">S</td><td class="M">M</td><td class="L">L</td></tr>
</table>