How to Create Table From an Array of Objects in JavaScript

On a webpage, unaligned data can decrease the readability and create problems for viewers. To tackle such situations, you can utilize the tables to sort data in a better way. Tables provide a great format to align data and improve readability and visibility. As tables can be created using HyperText Markup language (HTML), which can be linked with JavaScript.

This post will explain the procedure to form a table with an array of objects in JavaScript.

How to Create Table From an Array of Objects in JavaScript?

To create a table from an array of objects, we will use the following methods:

HTML Table string
map() method

Let’s explore each method one by one!

Method 1: Create Table From an Array of Objects Using HTML Table String in JavaScript

In JavaScript, the purpose of a “string” is to store text, numbers, or special symbols. Strings are defined by closing a character or group of characters in double or single quotes. More specifically, they are also utilized for creating tables.

Let’s take an example to get a clear concept about creating a table from an array of objects using the Table string.

Example

In our example, we will utilize a “<div>” tag with an id “container” and place it within the <body> tag of our HTML file:

Let’s declare an “array” and assign some values to it:

var array = ["Mark", "Sparrow", "Fish", "Orange"];

Initialize a variable “Table” to store the HTML table string:

var Table = "<table><tr>";

Specify the two cells per row by setting the value “2” of the “cells” variable:

var cells = 2;

Next, use the “array.for Each()” method to pass each array element from the function. Then, set the “{value}” with an identifier “$” within the “<TD>” tag. Next, declare a variable “a” to add to increment the index “i”, and specify an “if” condition in such a way that if the remainder of cells values and the created variable is equal to zero and the value “a” is not equal array’s length, then break into the next line or row of the table:

array.for Each((value, i) => {
Table += `<TD>${value}</TD>`;
var a = i + 1;
if (a%cells==0&&a!=array.length) {
Table += "</tr><tr>";
}});

Assign the table closing tags to the variable “Table” using the “+=” operator. Then, link the content of the Table to the created container using its container. For that, utilize the “belittlement()” method and pass the id to it and place the inner HTML to set the values within the variable Table:

Table += "</tr></table>";

document.belittlement("container").inner HTML = Table;

In our CSS file, we will apply some properties to the table and its data cells. To do so, we will set the “border” property with the value “1px solid” to set the border around the table and its cells and the “padding” property with the value “3px” to generate the defined space around the element content, according to the defined border:

table,TD {

border: 1px solid;

padding: 3px;

}

Save the given code, open your HTML file and view your table of an array’s objects:

Let’s explore one more method for creating a table from an array of objects in JavaScript.

Method 2: Create Table From an Array of Objects Using map() method in JavaScript

The “map()” method applies a specific function to each element of the array, and in return, it provides a new array. However, this method does not make any replacements in the original array. You can also utilize the map() method to form a table with an array of objects.

Example

Let’s create an array using the “let” keyword. Assign some values to the object properties or keys:

let array = [
{"Name": "Mark","Age": "Twenty (20)"},
{"Name": "Che mi","Age": "Thirty (30)"}]

Access the already created container by using belittlement() method and utilize “insertAdjacentHTML()” method to add the table tags:

document.belittlement('container').insertAdjacentHTML('afterend',

`<table><tr><th>

Use the “Object.keys()” method to access the keys of the defined object and then use the “join()” method to place them as headings within the “<th>” tag:

${Object.keys(array[0]).join('<th>')}

After adding the table head closing tag and table row and data opening tag, we will use the “map()” method to call the “Object.values()” method function for each value of the object keys, then utilize the “join()” method to place them within a row and move to next one:

</th><tr><TD>${array.map(e=>Object.values(e)

.join('<TD>')).join('<tr><TD>')}</table>`)

As you can see, we have successfully created table from the defined array of objects:

We have covered the efficient ways to create a table from an array of objects in JavaScript.

Conclusion

In JavaScript, for the formation of a table from an array of objects, the HTML “table” string or “map()” method can be utilized. To do so, specify a div tag with an id. Then, declare the array of objects in both methods, store table tags within variables, or directly return them to a connected HTML element with data. This post has discussed the method for creating a table from an Array of objects using JavaScript.

How to Create Table From an Array of Objects in JavaScript