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

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

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

JSON 文件：

例子：

  

    
    GFG User Details
  
    
    
    
  
    
    
        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;
        }
    

  

    
        GeeksForGeeks
  
        
        
            
            
                
                
                
                
            
  
            
    
  
输出：  HTML 是网页的基础，用于通过构建网站和 Web 应用程序进行网页开发。您可以按照此 HTML 教程和 HTML 示例从头开始学习 HTML。 CSS 是网页的基础，用于通过样式化网站和 Web 应用程序进行网页开发。您可以按照此 CSS 教程和 CSS 示例从头开始学习 CSS。 jQuery 是一个开源 JavaScript 库，它简化了 HTML/CSS 文档之间的交互，它以其“少写，多做”的理念而广为人知。您可以按照此 jQuery 教程和 jQuery 示例从头开始学习 jQuery。 
    
        Copyright © 2020 - 2024 版权所有
            

            蜀ICP备20006366号-1

            
            Made with ❤️ in Chengdu
        
    
GFG UserHandlePractice ProblemsCoding ScoreGFG Articles
                $(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);
                    });
                });