Append specific array object data to individual HTML table - jQuery
Question
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 AFN1 goes to
<table class="file-details" id="AFN1">
<th colspan=2>File Information</th>
</table>
That results to this: Figure 1
Now, the problem is that when I'm on the second or other table, the past data are also included.
Supposedly to be like Figure 1 , the other table looks like this Modal for Bulletin No. 3, can see that table for bulletin 1 and 2 are also included in the table of bulletin 3. Should not included.
How do I fix this? 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 class="pageContainer">
<!-- Page Container -->
<!--- Beginning of navbar --->
<nav class="navbar navbar-expand-lg navbar-dark bg-dark">
<a class="navbar-brand" href="/">Bulchives</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#main_nav">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="main_nav">
<ul class="navbar-nav ml-auto">
<li class="nav-item"><a class="nav-link" href="/">Home</a></li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" data-toggle="dropdown">2022 Files</a>
<ul class="dropdown-menu dropdown-menu-right">
<li><a class="dropdown-item" href="/2022/season-summary">Season Summary</a></li>
<li>
<a class="dropdown-item dropdown-toggle" href="">Agaton (03W Megi)</a>
<ul class="submenu submenu-left dropdown-menu">
<li><a class="dropdown-item" href="/2022/Agaton/TCB">TC Bulletins</a></li>
<li><a class="dropdown-item" href="/2022/Agaton/FT">Forecast Tracks</a></li>
<li><a class="dropdown-item" href="/2022/Agaton/TCWS">TCWS Maps</a></li>
</ul>
</li>
<li>
<a class="dropdown-item dropdown-toggle" href="">Basyang (02W Malakas)</a>
<ul class="submenu submenu-left dropdown-menu">
<li><a class="dropdown-item" href="/2022/Basyang/TCB">TC Bulletins</a></li>
<li><a class="dropdown-item" href="/2022/Basyang/FT">Forecast Tracks</a></li>
<li><a class="dropdown-item" href="/2022/Basyang/TCWS">TCWS Maps</a></li>
</ul>
</li>
<li>
<a class="dropdown-item dropdown-toggle" href="">Caloy (04W Chaba)</a>
<ul class="submenu submenu-left dropdown-menu">
<li><a class="dropdown-item" href="/2022/Caloy/TCB">TC Bulletins</a></li>
<li><a class="dropdown-item" href="/2022/Caloy/FT">Forecast Tracks</a></li>
<li><a class="dropdown-item" href="/2022/Caloy/TCWS">TCWS Maps</a></li>
</ul>
</li>
<li>
<a class="dropdown-item dropdown-toggle" href="">Domeng (05W Aere)</a>
<ul class="submenu submenu-left dropdown-menu">
<li><a class="dropdown-item" href="/2022/Domeng/TCB">TC Bulletins</a></li>
<li><a class="dropdown-item" href="/2022/Domeng/FT">Forecast Tracks</a></li>
<li><a class="dropdown-item" href="/2022/Domeng/TCWS">TCWS Maps</a></li>
</ul>
</li>
<li>
<a class="dropdown-item dropdown-toggle" href="">Ester (07W Trases)</a>
<ul class="submenu submenu-left dropdown-menu">
<li><a class="dropdown-item" href="/2022/Agaton/TCB">TC Bulletins</a></li>
<li><a class="dropdown-item" href="/2022/Agaton/FT">Forecast Tracks</a></li>
<li><a class="dropdown-item" href="/2022/Agaton/TCWS">TCWS Maps</a></li>
</ul>
</li>
</ul>
</li>
</ul>
</div>
</nav>
<!--- End of navbar -->
<div class="content-wrapper">
<div class="file-path">
<span>2022 > Agaton > TCB</span>
</div>
<hr class="content-seperator">
<div class="files">
<ul class="files-container">
<li class="file-item" data-toggle="modal" data-target="#agaton-tcb-1-modal">
<div class="file-display">
<img class="file-icon" src="/assets/icons/pdf-file.svg">
<div class="filename">
<span>Bulletin No. 01</span>
</div>
</div>
<div class="modal fade" id="agaton-tcb-1-modal" tabindex="-1" aria-labelledby="agaton-tcb-1-modal" aria-hidden="true">
<div class="modal-dialog modal-dialog-centered">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="agaton-tcb-1-modal">Agaton TCB No. 1</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
<img class="modal-filetype-icon" src="/assets/icons/pdf-file.svg">
<table class="file-details" id="AFN1">
<th colspan=2>File Information</th>
</table>
</div>
<div class="modal-footer">
<p>Data file from <a href="https://www.pagasa.dost.gov.ph/">DOST-PAGASA</a></p>
</div>
</div>
</div>
</div>
</li>
<li class="file-item" data-toggle="modal" data-target="#agaton-tcb-2-modal">
<div class="file-display">
<img class="file-icon" src="/assets/icons/pdf-file.svg">
<div class="filename">
<span>Bulletin No. 02</span>
</div>
</div>
<div class="modal fade" id="agaton-tcb-2-modal" tabindex="-1" aria-labelledby="agaton-tcb-2-modal" aria-hidden="true">
<div class="modal-dialog modal-dialog-centered">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="agaton-tcb-2-modal">Agaton TCB No. 2</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
<img class="modal-filetype-icon" src="/assets/icons/pdf-file.svg">
<table class="file-details" id="AFN2">
<th colspan=2>File Information</th>
</table>
</div>
<div class="modal-footer">
<p>Data file from <a href="https://www.pagasa.dost.gov.ph/">DOST-PAGASA</a></p>
</div>
</div>
</div>
</div>
</li>
<li class="file-item" data-toggle="modal" data-target="#agaton-tcb-3-modal">
<div class="file-display">
<img class="file-icon" src="/assets/icons/pdf-file.svg">
<div class="filename">
<span>Bulletin No. 03</span>
</div>
</div>
<div class="modal fade" id="agaton-tcb-3-modal" tabindex="-1" aria-labelledby="agaton-tcb-3-modal" aria-hidden="true">
<div class="modal-dialog modal-dialog-centered">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="agaton-tcb-3-modal">Agaton TCB No. 3</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
<img class="modal-filetype-icon" src="/assets/icons/pdf-file.svg">
<table class="file-details" id="AFN3">
<th colspan=2>File Information</th>
</table>
</div>
<div class="modal-footer">
<p>Data file from <a href="https://www.pagasa.dost.gov.ph/">DOST-PAGASA</a></p>
</div>
</div>
</div>
</div>
</li>
<li class="file-item" data-toggle="modal" data-target="#agaton-tcb-4-modal">
<div class="file-display">
<img class="file-icon" src="/assets/icons/pdf-file.svg">
<div class="filename">
<span>Bulletin No. 04</span>
</div>
</div>
<div class="modal fade" id="agaton-tcb-4-modal" tabindex="-1" aria-labelledby="agaton-tcb-4-modal" aria-hidden="true">
<div class="modal-dialog modal-dialog-centered">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="agaton-tcb-4-modal">Agaton TCB No. 4</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
<img class="modal-filetype-icon" src="/assets/icons/pdf-file.svg">
<table class="file-details" id="AFN4">
<th colspan=2>File Information</th>
</table>
</div>
<div class="modal-footer">
<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 class="content-seperator">
<div class="footer">
<footer>
<div class="footer-links">
<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 class="footer-text">© 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
2 answers
solution1
0 2022-08-20 18:29:05
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}`))
)
}
}
solution2
0 2022-08-20 18:47:20
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>
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.
Related Question
How to extract data from json array with jquery and append it in html table?
append $ in html table in specific column in jquery
Append data to html table using JQuery
jQuery append to HTML table
Using jQuery .append on individual elements in an object
Append data to html table
How to create an html object and append sibling to that from an array using JQuery?
JQuery/Javascript Append HTML Table Data To TBODY, Double Output
Append entire jQuery object to html
Append Jquery Object into HTML element
Related Tags