如何在表中插入来自 API 的返回 JSON 数据答案

【问题标题】：How do I insert returned JSON data in a table, coming from an API如何在表中插入来自 API 的返回 JSON 数据
【发布时间】：2017-01-22 21:42:55
【问题描述】：

所以我有一个带有 FORM 元素的表格：

<table id="example" class="sortable">
        <caption><h3><strong>Product inventory list</strong></h3></caption>

        <thead>
            <tr>
                <th>Name</th>
                <th>Category</th>
                <th>Amount</th>
                <th>Location</th>
                <th>Purchase date</th>
            </tr>
        </thead>
        <tfoot>
                <form id="myForm" action="http://wt.ops.few.vu.nl/api/xxxxxxxx" method="get">
                <td> 
                        <input type="text" name="name" required>
                </td>   
                <td>
                        <input type="text" name="category" required>
                </td>
                <td>
                        <input type="number" name="amount" required>
                </td>
                <td>
                        <input type="text" name="location" required>
                </td>
                <td>
                        <input type="date" name="date" required>
                </td>
                <td>
                        <input type="submit" value="Submit"> 
                </td>
                </form>
        </tfoot>
    </table>

我填写的信息会发送到我的 API 链接，但现在我需要将我填写的信息直接附加到表格中。

我知道我可以发送 AJAX GET 请求，以获取存储在 API 中的信息，但是如何将返回的 JSON 数据插入到表中？

【问题讨论】：

首先，您需要为每个输入添加 id 标签。否则，代码如何知道将 API 返回的值放在哪里？然后谷歌 javascript getElementById
@Reisclef document.querySelector、document.getElementsByClassName 等都是向表中添加id 属性的替代方法。
没错，我的立场是正确的。同意类名，或 querySelector 作为替代方案。但是，可能无法保证 API 顺序按索引符合 GUI。虽然上课可以工作，但似乎格格不入。我不应该将其表述为“需要”，而不是“您可能”。

标签： javascript jquery json ajax api

【解决方案1】：

你可以得到的值

<input id= "nameid" type="text" name="name" required>

与

var value = $("#nameid").val();

或设置它

$("#nameid").val("myname");

【讨论】：

可能想在纯 JS 中执行此操作（也许除了您的 jQuery），因为 OP 没有标记为 jQuery。
好吧，问题显然现在标记为 jquery，那么，为什么有人要让它变得比必要的更难？

【解决方案2】：

您可以使用 jQuery 就绪或按钮单击事件来加载数据。下面的代码 sn-p 演示了加载 HTML 文档后自动加载数据。希望这个答案！

<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>Product Inventory List</title>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>

</head>

<body>

<table id="products" class="sortable" border='1'>
<caption><h3><strong>Product inventory list</strong></h3></caption>
    <tr>
        <th>Name</th>
        <th>Category</th>
        <th>Amount</th>
        <th>Location</th>
        <th>Purchase date</th>
    </tr>
</table>

<script>

var api = 'http://example.com/api/v1/products';

$(document).ready(function(){

  jQuery.support.cors = true;

  $.ajax(
  {
      type: "GET",
      url: api + '/products',
      contentType: "application/json; charset=utf-8",
      dataType: "json",
      cache: false,
      success: function (data) {

        var trHTML = '';                
        $.each(data.products, function (i, item) {            
          trHTML += '<tr><td>' + data.products[i].name + '</td><td>' + data.products[i].category + '</td><td>' + data.products[i].amount + '</td><td>' + data.products[i].location + '</td><td>' + data.products[i].pdate + '</td></tr>';
        });        
        $('#products').append(trHTML);

        },

        error: function (msg) {            
          alert(msg.responseText);
        }
    });
})

</script>

</body>
</html>

【讨论】：