表中显示未定义的数据

Question

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

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

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

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 变量，以便其余代码可以使用该对象来获取它们的值。