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

Question

我有以下JSON数据：

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

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

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

Answer 1

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

＆＃13;

＆＃13;

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);

＆＃13;

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

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;