如何使用jQuery从JSON文件中获取数据并显示在HTML表中？

该任务是从给定的JSON文件中获取数据并将数据转换为HTML表。

方法：我们有一个JSON文件, 其中包含对象数组形式的数据。在我们的代码中, 我们使用jQuery完成我们的任务。 jQuery代码使用getJSON()使用AJAX从文件位置获取数据的方法HTTP GET请求。它有两个参数。一个是JSON文件的位置, 另一个是包含JSON数据的函数。的每()函数用于遍历数组中的所有对象。它还需要两个参数。一个是数据, 另一个是包含索引和元素的函数。空字符串用于构造包含JSON对象数据的行。的附加()方法用于附加包含表中行的字符串。

JSON文件：

例子：

< 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 >lsbin</ 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 >

输出如下：

---