如何使用jQuery从JSON文件中获取数据并显示在HTML表中（） _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 >

【如何使用jQuery从JSON文件中获取数据并显示在HTML表中（）】输出如下：