simple ajax html javascript

index.html

  <div id="data-table">
    <p id="loading-message">Loading...</p>
    <p id="data-count"></p>
    <table>
      <thead>
        <tr>
          <th>Title</th>
          <th>Description</th>
          <th>Link</th>
          <th>Category</th>
        </tr>
      </thead>
      <tbody id="data-body"></tbody>
    </table>
  </div>

script.js

const url = 'https://api.publicapis.org/entries';

function showLoading() {
  const dataTable = document.getElementById('data-table');
  const loadingMessage = document.getElementById('loading-message');
  dataTable.style.display = 'none';
  loadingMessage.style.display = 'block';
}

function hideLoading() {
  const loadingMessage = document.getElementById('loading-message');
  loadingMessage.style.display = 'none';
}

function fetchData() {
  const dataTable = document.getElementById('data-table');
  const loadingMessage = document.getElementById('loading-message');
  dataTable.style.display = 'none';
  fetch(url)
    .then(response => response.json())
    .then(data => {
      const count = data.count;
      const entries = data.entries;
      const dataCountElement = document.getElementById('data-count');
      const dataTableBody = document.getElementById('data-body');

      dataCountElement.textContent = `Jumlah data: ${count}`;
      dataTableBody.innerHTML = '';

      entries.forEach(entry => {
        const row = document.createElement('tr');

        const titleCell = document.createElement('td');
        titleCell.textContent = entry.API;
        row.appendChild(titleCell);

        const descriptionCell = document.createElement('td');
        descriptionCell.textContent = entry.Description;
        row.appendChild(descriptionCell);

        const linkCell = document.createElement('td');
        const linkAnchor = document.createElement('a');
        linkAnchor.href = entry.Link;
        linkAnchor.textContent = entry.Link;
        linkCell.appendChild(linkAnchor);
        row.appendChild(linkCell);

        const categoryCell = document.createElement('td');
        categoryCell.textContent = entry.Category;
        row.appendChild(categoryCell);
        dataTableBody.appendChild(row);
        dataTable.style.display = 'block';
      });

      hideLoading();
    })
    .catch(error => {
      hideLoading();
      console.error('Error:', error);
    });
}

fetchData();

simple-ajax-html-javascript.markdown

simple ajax html javascript

A Pen by Cloud Dark on CodePen.

License.

style.css

table {
  border-collapse: collapse;
  width: 100%;
}
th, td {
  border: 1px solid black;
  padding: 8px;
  text-align: left;
}
th {
  background-color: #f2f2f2;
}