How do I use JSON data as data for HTML tables? I'm creating a website that uses bootstrap modal, inside the modal is a table. These modals are several in count and is differentiated from others with ID. Now, I have this JSON file (its long so I trimmed it). The purpose is to display the data inside the nested objects to appropriate table. Example:
{
"AFN1":{
"Filename":"Agaton_TCB_1",
"Filetype":"Portable Document Format (PDF)",
"Release_Date":"Apr-08-2022 21:34 UTC",
"Filesize":"524kb",
"Download_URL":"https://raw.githubusercontent.com/AstrooKai/Bulchives/main/2022/Agaton/Bulletins/Agaton_TCB_1.pdf"
},
"AFN2":{
"Filename":"Agaton_TCB_2",
"Filetype":"Portable Document Format (PDF)",
"Release_Date":"Apr-09-2022 01:09 UTC",
"Filesize":"244kb",
"Download_URL":"https://raw.githubusercontent.com/AstrooKai/Bulchives/main/2022/Agaton/Bulletins/Agaton_TCB_2.pdf"
}
}
The nested data ofAFN1 goes only to a table with the matching id AFN1
<table id="AFN1">
<th colspan=2>File Information</th>
</table>
That results to this: Figure 1 Code of Figure 1 is below
<table id="AFN1">
<th colspan=2>File Information</th>
<tr>
<td>Filename</td>
<td>Agaton_TCB_1</td>
</tr>
<tr>
<td>Filetype</td>
<td>Portable Document Format (PDF)</td>
</tr>
<tr>
<td>Filesize</td>
<td>524kb</td>
</tr>
<tr>
<td>Release Date</td>
<td>Apr-08-2022 21:34 UTC</td>
</tr>
<tr>
<td>Download URL</td>
<td colspan=2><a href="https://raw.githubusercontent.com/AstrooKai/Bulchives/main/2022/Agaton/Bulletins/Agaton_TCB_1.pdf" download>Download File</a></td>
</tr>
</table>
Now, when I'm on the AFN3 table (which is located in different modal div), the nested data of AFN3 does get appended to that specific table, but the nested data of AFN1 and AFN2 are also appended to table AFN3.
Supposedly to be like Figure 1, the AFN3 table looks like this, you can see that nested data AFN1 and AFN2 are also included in the table of bulletin 3 (AFN3).
How do I fix this? Each nested data should be placed to individual tables identified by ID. The full codes are the following (Ignore the hrefs in the of HTMl and other srcs in other files)
HTML:
<!DOCTYPE html>
<html lang="en-US">
<head>
<!-- Meta and Informations Section -->
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Bulchives | (2022) Agaton TCB</title>
<meta name="description" content="Collection of all PAGASA issued bulletins for 2022 Agaton (Megi).">
<meta name="keywords" content="Agaton, archive, bagyo, bulletin, forecast, Goni, JMA, JTWC, Megi, Odette, PAGASA, TCB, typhoon, weather, Yolanda">
<meta property="og:title" content="Bulchives | /2022/Agaton/TCB">
<meta property="og:description" content="Collection of all PAGASA issued bulletins for 2022 Agaton (Megi).">
<!-- CSS Components Section -->
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Archivo Black">
<link rel="stylesheet" href="/css/backgroundImage.css">
<link rel="stylesheet" href="/css/pageContainer.css">
<link rel="stylesheet" href="/css/modifiedBootstrap4.css">
<link rel="stylesheet" href="/css/navbar.css">
<link rel="stylesheet" href="/css/contentWrapper.css">
<link rel="stylesheet" href="/css/footer.css">
<!-- JS Components Section -->
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
<script src="/js/changeBg.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.bundle.min.js" type="text/javascript"></script>
<script src="/js/navbar.js"></script>
<script src="/js/modalContent.js"></script>
</head>
<body>
<div >
<!-- Page Container -->
<!--- Beginning of navbar --->
<nav >
<a href="/">Bulchives</a>
<button type="button" data-toggle="collapse" data-target="#main_nav">
<span ></span>
</button>
<div id="main_nav">
<ul >
<li ><a href="/">Home</a></li>
<li >
<a href="#" data-toggle="dropdown">2022 Files</a>
<ul >
<li><a href="/2022/season-summary">Season Summary</a></li>
<li>
<a href="">Agaton (03W Megi)</a>
<ul >
<li><a href="/2022/Agaton/TCB">TC Bulletins</a></li>
<li><a href="/2022/Agaton/FT">Forecast Tracks</a></li>
<li><a href="/2022/Agaton/TCWS">TCWS Maps</a></li>
</ul>
</li>
<li>
<a href="">Basyang (02W Malakas)</a>
<ul >
<li><a href="/2022/Basyang/TCB">TC Bulletins</a></li>
<li><a href="/2022/Basyang/FT">Forecast Tracks</a></li>
<li><a href="/2022/Basyang/TCWS">TCWS Maps</a></li>
</ul>
</li>
<li>
<a href="">Caloy (04W Chaba)</a>
<ul >
<li><a href="/2022/Caloy/TCB">TC Bulletins</a></li>
<li><a href="/2022/Caloy/FT">Forecast Tracks</a></li>
<li><a href="/2022/Caloy/TCWS">TCWS Maps</a></li>
</ul>
</li>
<li>
<a href="">Domeng (05W Aere)</a>
<ul >
<li><a href="/2022/Domeng/TCB">TC Bulletins</a></li>
<li><a href="/2022/Domeng/FT">Forecast Tracks</a></li>
<li><a href="/2022/Domeng/TCWS">TCWS Maps</a></li>
</ul>
</li>
<li>
<a href="">Ester (07W Trases)</a>
<ul >
<li><a href="/2022/Agaton/TCB">TC Bulletins</a></li>
<li><a href="/2022/Agaton/FT">Forecast Tracks</a></li>
<li><a href="/2022/Agaton/TCWS">TCWS Maps</a></li>
</ul>
</li>
</ul>
</li>
</ul>
</div>
</nav>
<!--- End of navbar -->
<div >
<div >
<span>2022 > Agaton > TCB</span>
</div>
<hr >
<div >
<ul >
<li data-toggle="modal" data-target="#agaton-tcb-1-modal">
<div >
<img src="/assets/icons/pdf-file.svg">
<div >
<span>Bulletin No. 01</span>
</div>
</div>
<div id="agaton-tcb-1-modal" tabindex="-1" aria-labelledby="agaton-tcb-1-modal" aria-hidden="true">
<div >
<div >
<div >
<h5 id="agaton-tcb-1-modal">Agaton TCB No. 1</h5>
<button type="button" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div >
<img src="/assets/icons/pdf-file.svg">
<table id="AFN1">
<th colspan=2>File Information</th>
</table>
</div>
<div >
<p>Data file from <a href="https://www.pagasa.dost.gov.ph/">DOST-PAGASA</a></p>
</div>
</div>
</div>
</div>
</li>
<li data-toggle="modal" data-target="#agaton-tcb-2-modal">
<div >
<img src="/assets/icons/pdf-file.svg">
<div >
<span>Bulletin No. 02</span>
</div>
</div>
<div id="agaton-tcb-2-modal" tabindex="-1" aria-labelledby="agaton-tcb-2-modal" aria-hidden="true">
<div >
<div >
<div >
<h5 id="agaton-tcb-2-modal">Agaton TCB No. 2</h5>
<button type="button" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div >
<img src="/assets/icons/pdf-file.svg">
<table id="AFN2">
<th colspan=2>File Information</th>
</table>
</div>
<div >
<p>Data file from <a href="https://www.pagasa.dost.gov.ph/">DOST-PAGASA</a></p>
</div>
</div>
</div>
</div>
</li>
<li data-toggle="modal" data-target="#agaton-tcb-3-modal">
<div >
<img src="/assets/icons/pdf-file.svg">
<div >
<span>Bulletin No. 03</span>
</div>
</div>
<div id="agaton-tcb-3-modal" tabindex="-1" aria-labelledby="agaton-tcb-3-modal" aria-hidden="true">
<div >
<div >
<div >
<h5 id="agaton-tcb-3-modal">Agaton TCB No. 3</h5>
<button type="button" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div >
<img src="/assets/icons/pdf-file.svg">
<table id="AFN3">
<th colspan=2>File Information</th>
</table>
</div>
<div >
<p>Data file from <a href="https://www.pagasa.dost.gov.ph/">DOST-PAGASA</a></p>
</div>
</div>
</div>
</div>
</li>
<li data-toggle="modal" data-target="#agaton-tcb-4-modal">
<div >
<img src="/assets/icons/pdf-file.svg">
<div >
<span>Bulletin No. 04</span>
</div>
</div>
<div id="agaton-tcb-4-modal" tabindex="-1" aria-labelledby="agaton-tcb-4-modal" aria-hidden="true">
<div >
<div >
<div >
<h5 id="agaton-tcb-4-modal">Agaton TCB No. 4</h5>
<button type="button" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div >
<img src="/assets/icons/pdf-file.svg">
<table id="AFN4">
<th colspan=2>File Information</th>
</table>
</div>
<div >
<p>Data file from <a href="https://www.pagasa.dost.gov.ph/">DOST-PAGASA</a></p>
</div>
</div>
</div>
</div>
</li>
</ul>
</div>
</div>
<hr >
<div >
<footer>
<div >
<ul>
<li><a href="/">Home</a></li>
<li><a href="javascript:aboutRedirect()">About</a></li>
<li><a href="javascript:contactRedirect()">Contact</a></li>
<li><a href="/sitemap">Sitemap</a></li>
</ul>
</div>
<span >© 2022 Bulchives<br>Data files displayed in this site are products of <a href="https://www.pagasa.dost.gov.ph">DOST-PAGASA</a></span>
</footer>
</div>
</div>
</body>
</html>
jQuery:
$(document).ready(function() {
// FETCHING DATA FROM JSON FILE
$.getJSON('https://bulchives.astrookai.repl.co/modal-data/agaton.json',
function(data) {
var info = '';
// ITERATING THROUGH OBJECTS
$.each(data, function(key, value) {
var element = '#' key;
//CONSTRUCTION OF ROWS HAVING
// DATA FROM JSON OBJECT
info = '<tr>';
info = '<td>Filename</td>';
info = '<td>' value.Filename '</td>';
info = '</tr>';
info = '<tr>';
info = '<td>File Type</td>';
info = '<td>' value.Filetype '</td>';
info = '</tr>';
info = '<tr>';
info = '<td>File Size</td>';
info = '<td>' value.Filesize '</td>';
info = '</tr>';
info = '<tr>';
info = '<td>Release Date</td>';
info = '<td>' value.Release_Date '</td>';
info = '</tr>';
info = '<tr>';
info = '<td colspan=2><a href="' value.Download_URL '" download>Download File' '</td>';
info = '</tr>';
$(element).append(info);
console.log(element);
});
});
});
Question Rewritten
CodePudding user response：
I hope it works (with your json data you provide):
Jquery
<script src="https://code.jquery.com/jquery-3.6.0.js"></script>
$('body').empty()
for (const [id, obj] of Object.entries(data)) {
var table = $('<table>').attr('id', `${id}`)
$('body').append(table)
for (const [key, value] of Object.entries(obj)) {
$(table).append(
$('<tr>')
.append($('<td>').append(`${key}`))
.append($('<td>').append(`${value}`))
)
}
}
CodePudding user response：
With jQuery
Will loop over data object and render DOM into #data-tables div.
const data = {
"AFN1":{
"Filename":"Agaton_TCB_1",
"Filetype":"Portable Document Format (PDF)",
"Release_Date":"Apr-08-2022 21:34 UTC",
"Filesize":"524kb",
"Download_URL":"https://raw.githubusercontent.com/AstrooKai/Bulchives/main/2022/Agaton/Bulletins/Agaton_TCB_1.pdf"
},
"AFN2":{
"Filename":"Agaton_TCB_2",
"Filetype":"Portable Document Format (PDF)",
"Release_Date":"Apr-09-2022 01:09 UTC",
"Filesize":"244kb",
"Download_URL":"https://raw.githubusercontent.com/AstrooKai/Bulchives/main/2022/Agaton/Bulletins/Agaton_TCB_2.pdf"
}
}
for(const fragment in data) {
const table = $(`<table id="${fragment}"></table>`);
for(const key in data[fragment]) {
const row = $(`<tr>
<td>${key}</td>
<td>${data[fragment][key]}</td>
</tr>`);
table.append(row);
}
$('#data-tables').append(table);
}table {
border: 1px solid black;
display: inline-block;
margin: 4px;
padding: 4px;
}<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="data-tables"></div>