Utilize Javascript to pull information from a REST API and generate a dynamic table with the retrieved

Question

Utilize Javascript to pull information from a REST API and generate a dynamic table with the retrieved

Generating a table from JSON data obtained from a REST API without utilizing Angular poses a challenge in a specific application.

My query is: Is it necessary to use

var table = document.createElement("TABLE");

within the script to construct the entire table, or is there a more elegant method to separate the code and build the table in the .html file?

In essence, I am looking for a solution that resembles one-way data binding in Angular, as I have primarily used Angular for REST API integration, but Vanilla JavaScript is mandated for this project.

Appreciate any guidance.

javascript json rest

Answer 1

Answer №1

If you're working with vanilla JS, achieving this task is pretty straightforward. All you need to do is continuously add elements and iterate through them. Here's an example:

const input = [
  { foo: 'f', bar: 'b' },
  { foo: 'ff', bar: 'bb' },
  { foo: 'fff', bar: 'bbb' },
  { foo: 'f', bar: 'b' },
];
const table = document.body.appendChild(document.createElement('table'));
const thead = table.appendChild(document.createElement('thead'));
const tr = thead.appendChild(document.createElement('tr'));
const columnTexts = Object.keys(input[0]);
columnTexts.forEach((columnText) => {
  tr.appendChild(document.createElement('td'))
    .textContent = columnText;
});
const tbody = table.appendChild(document.createElement('tbody'));
input.forEach((item) => {
  const tr = tbody.appendChild(document.createElement('tr'));
  const values = Object.values(item);
  values.forEach(value => {
    tr.appendChild(document.createElement('td'))
      .textContent = value;
  });
});

Answer 2

If you're working with vanilla JS, achieving this task is pretty straightforward. All you need to do is continuously add elements and iterate through them. Here's an example:

const input = [
  { foo: 'f', bar: 'b' },
  { foo: 'ff', bar: 'bb' },
  { foo: 'fff', bar: 'bbb' },
  { foo: 'f', bar: 'b' },
];
const table = document.body.appendChild(document.createElement('table'));
const thead = table.appendChild(document.createElement('thead'));
const tr = thead.appendChild(document.createElement('tr'));
const columnTexts = Object.keys(input[0]);
columnTexts.forEach((columnText) => {
  tr.appendChild(document.createElement('td'))
    .textContent = columnText;
});
const tbody = table.appendChild(document.createElement('tbody'));
input.forEach((item) => {
  const tr = tbody.appendChild(document.createElement('tr'));
  const values = Object.values(item);
  values.forEach(value => {
    tr.appendChild(document.createElement('td'))
      .textContent = value;
  });
});

Utilize Javascript to pull information from a REST API and generate a dynamic table with the retrieved

Answer №1

Similar questions

Utilizing the .data() method for establishing a variable

Tips for parsing dynamic JSON content into an object?

The value in the textarea will stay unchanged even after the form has been submitted

Transferring JSON data to Google Sheets can result in unusual column formatting and all the information ending up in a

Tips for transferring data from a service to a method within a component

Exploring the textures of an imported 3D model mesh with multiple materials in A-Frame and Three JS

Utilizing NextJS Image Component in Conjunction with Auth0

Update the label on a webpage using Selenium's JavaScriptExecutor

Is there a way for me to retrieve data from a v-for loop in VueJS with the Quasar Framework?

Trigger a JavaScript alert message upon clicking the close button

Advancing past the stage of developing basic functions in the document.ready() event handler

Creating a JSON object that aligns with the structure of a Swift Struct

Error copying cell width attribute when using border collapse

Find the sum of every combination of numbers in the array

In Typescript, you can easily group a string into sections that consist of digits like 345-67, along with text containing a

Attempting to utilize the async/await method to retrieve a service, but unfortunately, the returned values from the second service are not populating my variables as intended

Tips on retrieving JSON data from javascript files

The regular expression pattern ((xn--)?[a-z0-9]+(-[a-z0-9]+)*.)+[a-z]{2,} is functional when used on regexpal.com, however, it does not yield the

The use of 'process.argv' and 'process.argv.slice(1)' does not seem to be functioning properly within Cypress

Is it possible to access a hidden JavaScript variable in Selenium?