table 中显示未定义的数据

Question

我正在尝试将我的数据放入 HTML table。 JavaScript 正确检测数据并在 table 中显示两行，这是正确的。问题是两行的每个字段都显示未定义。不知道从这里去哪里。

$(function() {

  var records = [];
  $.getJSON('https://v1.nocodeapi.com/devmarq/airtable/RiBnzHulmTPHkgnD?tableName=JobListings&fields=company,logo,companyDescription,role,roleDescription,location,link,dateAdded&view=AllListings', function(data) {
    $.each(data.records, function parseJSON(i, f) {
      var tblRow = "<tr>" + "<td>" + f.company + "</td>" + "<td>" + f.companyDescription + "</td>" + "<td>" + f.role + "</td>" + "<td>" + f.roleDescription + "</td>" + "</tr>"
      $(tblRow).appendTo("#userdata tbody");
    });
  });
});

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

<div class="wrapper">
  <div class="profile">
    <table id="userdata" border="2">
      <thead>
        <th>Company</th>
        <th>Company Description</th>
        <th>Role</th>
        <th>Role Description</th>
      </thead>
      <tbody>
      </tbody>
    </table>
  </div>
</div>

table 再次显示两行，这是正确的，但行的每个值都表示未定义。

Answer 1

您需要从记录对象中提取字段键：

$(function() {
    var records = [];

    $.getJSON('https://v1.nocodeapi.com/devmarq/airtable/RiBnzHulmTPHkgnD?tableName=JobListings&fields=company,logo,companyDescription,role,roleDescription,location,link,dateAdded&view=AllListings', function(data) {
        $.each(data.records, function parseJSON(i, { fields: f }) {
            var tblRow = "<tr>" + "<td>" + f.company + "</td>" + "<td>" + f.companyDescription + "</td>" + "<td>" + f.role + "</td>" + "<td>" + f.roleDescription + "</td>" + "</tr>"
            $(tblRow).appendTo("#userdata tbody");
        });
    });
});

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

<div class="wrapper">
  <div class="profile">
    <table id="userdata" border="2">
      <thead>
        <th>Company</th>
        <th>Company Description</th>
        <th>Role</th>
        <th>Role Description</th>
      </thead>
      <tbody>
      </tbody>
    </table>
  </div>
</div>

我将 parseJSON 函数的第二个参数从 f 更改为 { fields: f }；这使用对象解构来获取传递给第二个参数的对象中字段条目的值，并将其分配给 f 变量，以便其余代码可以使用该对象来获取它们的值。

table 中显示未定义的数据

Data showing undefined in table

javascript

html

api

fetch