<
html
lang
=
"en"
>
<
head
>
<
meta
charset
=
"UTF-8"
>
<
title
>GFG User Details</
title
>
<
script
src
=
</
script
>
<
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
id
=
'table'
>
<
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
>