CODEWITHSUNDEEP
jqueryarraysjson
Abhay Yadav
Abhay Yadav

Reputation: 23

how to print json data in html table using javascript

when i am trying to print data in html its show error.

i want print atlets details like first name, last name etc.

Please help, Thanks in advance!

https://uhsaa.org/stats/leaders.json

$(document).ready(function(e) {
   var dmJSON = "https://uhsaa.org/stats/leaders.json?callback=?";
    $.getJSON( dmJSON, function(data) {
       $.each(data.Leaders.Athletes, function(i, f) {
          var tblRow = "<tr>" + "<td data-label='ID'>" + f.id + "</td>" + "<td  data-label='User Name'>" + f.user.username + "</td>" + "<td  data-label='URL'>"+ f.url + "</td>" +"</tr>"
           $(tblRow).appendTo("#entrydata tbody");
     });

    });
});

Upvotes: -1

Views: 765

Answers (1)

95faf8e76605e973
95faf8e76605e973

Reputation: 14201

You could try to generate the HTML then assign it to the table
Hope this helps

$(document).ready(function(e) {
    var dmJSON = "https://cors.io/?https://uhsaa.org/stats/leaders.json";
    htmlBuilder = "";
    $.getJSON( dmJSON, function(data) {
       for(var i=0; i<data.Leaders.Athletes.length; i++){  
       htmlBuilder += "<tr>";
       htmlBuilder += "<td>" + data.Leaders.Athletes[i].Athlete.AthleteID + "</td>";
       htmlBuilder += "<td>" + data.Leaders.Athletes[i].Athlete.FirstName + "</td>";
       htmlBuilder += "<td>" + data.Leaders.Athletes[i].Athlete.Position + "</td>";
       htmlBuilder += "<td>" + data.Leaders.Athletes[i].Athlete.School + "</td>";
       htmlBuilder += "</tr>";
       }
       $("#entrydata").html(htmlBuilder);
     });
});
td, tr, table {
border: 1px solid black;
}
<script
  src="https://code.jquery.com/jquery-3.3.1.min.js"
  integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8="
  crossorigin="anonymous"></script>
  
<table style="border 1px" id="entrydata">
</table>

Upvotes: 1

Related Questions