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

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

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

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

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

示例:

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

输出:
如何使用jQuery从JSON文件中获取数据并显示在HTML表格中?

HTML是网页的基础,通过构建网站和网络应用程序来进行网页开发。你可以通过学习这个HTML教程和HTML实例,从基础开始学习HTML。jQuery是一个开源的JavaScript库,它简化了HTML/CSS文档之间的交互,它以其 “少写多做 “的理念而广为人知。

Python教程

Java教程

Web教程

数据库教程

图形图像教程

大数据教程

开发工具教程

计算机教程