Customize Consent Preferences

We use cookies to help you navigate efficiently and perform certain functions. You will find detailed information about all cookies under each consent category below.

The cookies that are categorized as "Necessary" are stored on your browser as they are essential for enabling the basic functionalities of the site. ... 

Always Active

Necessary cookies are required to enable the basic features of this site, such as providing secure log-in or adjusting your consent preferences. These cookies do not store any personally identifiable data.

No cookies to display.

Functional cookies help perform certain functionalities like sharing the content of the website on social media platforms, collecting feedback, and other third-party features.

No cookies to display.

Analytical cookies are used to understand how visitors interact with the website. These cookies help provide information on metrics such as the number of visitors, bounce rate, traffic source, etc.

No cookies to display.

Performance cookies are used to understand and analyze the key performance indexes of the website which helps in delivering a better user experience for the visitors.

No cookies to display.

Advertisement cookies are used to provide visitors with customized advertisements based on the pages you visited previously and to analyze the effectiveness of the ad campaigns.

No cookies to display.

HTML Tables + JavaScript

Tiempo de lectura: 2 minutos
Reading time: 2 minutes

To create a simple table from an array of objects, follow the steps below:

First, create a file with the .html extension, where you’ll create a div with an associated ID to display the table with the data of the elements. The ID for the table within the HTML will be “tabla” as an example.

<div id="tabla">

Once you have the ID where you’ll build the table, create a file with the .js extension. In this file, you’ll develop the logic part.

Create a file named main.js as an example, then associate this file with the HTML as follows:

Inside the JavaScript file, declare and initialize the array of objects that you want to display in your table:

var objectArray = [
    {
        id: 1,
        name: "DevCodeLight1",
    },
    {
        id: 2,
        name: "DevCodeLight2",
    },
    {
        id: 3,
        name: "DevCodeLight3",
    }
];

Add the following method, which is triggered when the HTML document has been completely loaded and parsed:

document.addEventListener("DOMContentLoaded", function(event) {
  
});

Create a function to handle the logic for rendering our object table.

We’ll iterate over the data using a for loop, and for each element, we’ll perform the same rendering. In this case, we’ll access the attributes of each object, its ID and name. We’ll add the attributes within a table, using the <table></table> tags.

Finally, outside the loop, specify the ID of the element where you want to display the table of data.

function createObjectTable() {
    var accumulator = "";
    accumulator += "<table>" +
        "<thead>" +
        "<tr>" +
        "<th>Id</th>" +
        "<th>Name</th>" +
        "</tr>" +
        "</thead>" +
        "<tbody>";
    for (var i = 0; i < objectArray.length; i++) {
        accumulator += "<tr>" +
            "<td>" + objectArray[i].id + "</td>" +
            "<td>" + objectArray[i].name + "</td>" +
            "</tr>";
    }
    accumulator += "</tbody>" +
        "</table>";

    document.getElementById("tabla").innerHTML = accumulator;
}

Call this method from the previously created function, resulting in the following JavaScript:

To finish, run the index.html file in the browser to see the result.

I hope this helps you!!

0

Leave a Comment