JSON to HTML Table JavaScript Not Working

Question

JSON to HTML Table JavaScript Not Working

I've written this function to display the contents of the JSON file in an HTML table. However, it's returning as undefined.

I don't seem to be able to work out why this is happening. The console log displays the data just fine, but not the HTML table.

I'm wondering if it has something to do with the way arrays are parsed?

I want to keep the code short and clean, but wondering if there is a better way to do this without the undefined error. Maybe Vanilla JavaScript is better, using fetch?

Live page is found here: LBRYnomics

Thanks in advance!

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>

Each of those properties ranks & vanity_names & claim_ids etc are individual arrays and are properties of data object itself. You are misinterpreting the data structure received. Do you control the api data source? — charlietfl
– charlietfl, Commented Sep 10, 2019 at 0:40

charlietfl · Accepted Answer · 2019-09-10 00:59:54Z

2

You have multiple different arrays for each of those properties.

Assuming they are all in same relationship order you can loop over one of the arrays and use the iteration index to access corresponding elements from each of the other arrays.

Something like:

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>

edited Sep 10, 2019 at 0:59

answered Sep 10, 2019 at 0:49

charlietfl

172k14 gold badges125 silver badges154 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Electron Over a year ago

Thanks. This works perfectly and it's just a small amendment. Many thanks.

Joy Biswas · Accepted Answer · 2019-09-10 00:49:22Z

2

I think after inspecting the api it looks the items are put in different array with no connection but they have the same length. So assuming that attrbute1 at index N maps to attribute2 at index N and so on.

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 = '';
    for(var i=0; i<data.ranks.length; i++){
    //$.each(data.ranks, function(key, value) {
      sub_data += '<tr>';
      sub_data += '<td>' + data.ranks[i] + '</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>

answered Sep 10, 2019 at 0:49

Joy Biswas

6,5371 gold badge27 silver badges50 bronze badges

1 Comment

Electron Over a year ago

Thanks. Wasn't sure if I needed the extra for statement, so chose the other answer because it was smaller/cleaner. Many thanks for your help also.

Collectives™ on Stack Overflow

JSON to HTML Table JavaScript Not Working

JSON to HTML Table JavaScript Not Working

2 Answers 2

1 Comment

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

JSON to HTML Table JavaScript Not Working

2 Answers 2

1 Comment

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related