JSON至HTML表格JavaScript无法正常工作

我已经编写了此函数以在HTML表中显示JSON文件的内容。但是,它以undefined的形式返回。

我似乎无法弄清为什么会这样。控制台日志仅显示数据,但不会显示HTML表。

我想知道它是否与解析arrays的方式有关?

我想使代码简短明了,但想知道是否有更好的方法来完成此操作而不会出现undefined错误。使用fetch也许Vanilla JavaScript更好?

可在此处找到实时页面:LBRYnomics

提前致谢!



jQuery(document).ready(function($) {     $.getJSON('https://www.brendonbrewer.com/lbrynomics/subscriber_counts.json', function(data) {
    var humanTimeSub = `${data.human_time_utc}`
    $(".human-time-sub").html(humanTimeSub)
    var sub_data = '';
    $.each(data, function(key, value) {
      sub_data += '<tr>';
      sub_data += '<td>' + value.ranks + '</td>';
      sub_data += '<td>' + value.vanity_names + '</td>';
      sub_data += '<td>' + value.claim_ids + '</td>';
      sub_data += '<td>' + value.subscribers + '</td>';
      sub_data += '</tr>';
      console.log(key + '=' + value);
    });
    $('#sub-stats').append(sub_data);
  });
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table id="sub-stats">
  <tr>
    <th>RANK</th>
    <th>VANITY NAME</th>
    <th>CLAIM ID</th>
    <th>SUBS</th>
  </tr>
</table>

最佳答案

这些属性的每个都有多个不同的数组。

假设它们都处于相同的关系顺序,则可以循环访问其中一个数组,并使用迭代索引来访问其他每个数组中的对应元素。

就像是:



jQuery(document).ready(function($) {     $.getJSON('https://www.brendonbrewer.com/lbrynomics/subscriber_counts.json', function(data) {
    var humanTimeSub = `${data.human_time_utc}`
    $(".human-time-sub").html(humanTimeSub);

    var sub_data = '';
    $.each(data.ranks, function(i, rank) {
      sub_data += '<tr>';
      sub_data += '<td>' + rank + '</td>';
      sub_data += '<td>' + data.vanity_names[i] + '</td>';
      sub_data += '<td>' + data.claim_ids[i] + '</td>';
      sub_data += '<td>' + data.subscribers[i] + '</td>';
      sub_data += '</tr>';
      //console.log(key + '=' + value);
    });
    $('#sub-stats').append(sub_data);
  });
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table id="sub-stats">
  <tr>
    <th>RANK</th>
    <th>VANITY NAME</th>
    <th>CLAIM ID</th>
    <th>SUBS</th>
  </tr>
</table>

09-11 19:38
查看更多