show json data in html table
<html lang="en"> <head> <meta charset="UTF-8"> <title>GFG User Details</title> <!-- INCLUDING JQUERY--> <script src= "https://code.jquery.com/jquery-3.5.1.js"> </script> <!-- CSS FOR STYLING THE PAGE --> <style> table { margin: 0 auto; font-size: large; border: 1px solid black; } h1 { text-align: center; color: #006600; font-size: xx-large; font-family: 'Gill Sans', 'Gill Sans MT', ' Calibri', 'Trebuchet MS', 'sans-serif'; } td { background-color: #E4F5D4; border: 1px solid black; } th, td { font-weight: bold; border: 1px solid black; padding: 10px; text-align: center; } td { font-weight: lighter; } </style> </head> <body> <section> <h1>GeeksForGeeks</h1> <!-- TABLE CONSTRUCTION--> <table id='table'> <!-- HEADING FORMATION --> <tr> <th>GFG UserHandle</th> <th>Practice Problems</th> <th>Coding Score</th> <th>GFG Articles</th> </tr> <script> $(document).ready(function () { // FETCHING DATA FROM JSON FILE $.getJSON("gfgdetails.json", function (data) { var student = ''; // ITERATING THROUGH OBJECTS $.each(data, function (key, value) { //CONSTRUCTION OF ROWS HAVING // DATA FROM JSON OBJECT student += '<tr>'; student += '<td>' + value.GFGUserName + '</td>'; student += '<td>' + value.NoOfProblems + '</td>'; student += '<td>' + value.TotalScore + '</td>'; student += '<td>' + value.Articles + '</td>'; student += '</tr>'; }); //INSERTING ROWS INTO TABLE $('#table').append(student); }); }); </script> </section> </body> </html>
