[英]Append specific array object data to individual HTML table - jQuery
如何使用 JSON 数据作为 HTML 表的数据？ 我正在创建一个使用引导模式的网站，模式内部是一个表格。 这些模态有几个，并与其他具有 ID 的模态区分开来。 现在，我有这个 JSON 文件（它很长，所以我修剪了它） 。 目的是将嵌套对象内的数据显示到适当的表中。 例子：
{
"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"
}
}
AFN1 去往
<table class="file-details" id="AFN1">
<th colspan=2>File Information</th>
</table>
结果如下：图 1
现在，问题是当我在第二张或其他桌子上时，过去的数据也包括在内。
据说和图1一样，另外一个表格看起来像这个3号公告的Modal，可以看到公告1和2的表格也包含在公告3的表格中。应该不包含。
我该如何解决？ 完整代码如下（忽略HTMl和其他文件中其他srcs中的hrefs）
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);
});
});
});
重写的问题
我希望它有效（使用您提供的 json 数据）：
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}`))
)
}
}
将循环数据 object 并将 DOM 渲染到#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>
如何使用jquery从json数组中提取数据并将其附加到html表中？
[英]How to extract data from json array with jquery and append it in html table?
如何创建一个html对象，并使用JQuery从数组中添加同级对象？
[英]How to create an html object and append sibling to that from an array using JQuery?
JQuery / Javascript将HTML表数据追加到TBODY，双输出
[英]JQuery/Javascript Append HTML Table Data To TBODY, Double Output
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.