Append specific array object data to individual HTML table - jQuery

AstrooKai
August 20, 2022
202 views
1 vote
2 Answers

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 class="file-details" id="AFN1">
  <th colspan=2>File Information</th>
</table>

That results to this: Figure 1 Code of Figure 1 is below

<table class="file-details" 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 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">&times;</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">&times;</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">&times;</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">&times;</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

Answers

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}`))
      )
   }
}

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>

Please signup or login to give your own answer.

Click here to cancel reply.

Append specific array object data to individual HTML table – jQuery

Answers

With jQuery