Javascript technique for creating tables from arrays of comma-separated strings

Question

Javascript technique for creating tables from arrays of comma-separated strings

I am attempting to generate an HTML table using a given input string that is separated by commas

// HeaderTable = Headers Table  
// DataTable   = Body Table

Input Values:

headerTable =  "Header1,Header2,Header3"
dataTable   =  [["TEST1,TEST1,TEST1"],["TEST2,TEST2,TEST2"],["TEST3,TEST3,TEST3"]]

Expected response:

<table>
  <thead>
    <tr>
      <th>Header 1</th>
      <th>Header 2</th>
      <th>Header 3</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>TEST1</td>
      <td>TEST2</td>
      <td>TEST3</td>
    </tr>
    <tr>
      <td>TEST1</td>
      <td>TEST2</td>
      <td>TEST3</td>       
    </tr>
    <tr>
      <td>TEST1</td>
      <td>TEST2</td>
      <td>TEST3</td> 
    </tr>
  </tbody>
</table>

Get back a unique html table code as a string

Desired response format Format Image

My Implementation Jsfiddle

javascript arrays html-table

Answer 1

Answer №1

Give this a shot:

<div id="container"></div>

let dataList = ["TEST1", "TEST2", "TEST3"]
let headerList = [" Header 1", "Header 2", "Header 3"]

let container = document.getElementById('container');

let thead = document.createElement('thead');
let th = document.createElement('th');
let tbody = document.createElement('tbody');
let td = document.createElement('td');
let tr = document.createElement('tr');
container.appendChild(tr);

container.appendChild(thead);
thead.appendChild(tr);

for(let i = 0; i < headerList.length; i++){
    th = document.createElement('th');
    th.textContent = headerList[i];
    tr.appendChild(th);
}

container.appendChild(tbody);
tbody.appendChild(tr);

for(let i = 0; i < dataList.length; i++){
    td = document.createElement('td');
    td.textContent = dataList[i];
    tr.appendChild(td);
}

Answer 2

Give this a shot:

<div id="container"></div>

let dataList = ["TEST1", "TEST2", "TEST3"]
let headerList = [" Header 1", "Header 2", "Header 3"]

let container = document.getElementById('container');

let thead = document.createElement('thead');
let th = document.createElement('th');
let tbody = document.createElement('tbody');
let td = document.createElement('td');
let tr = document.createElement('tr');
container.appendChild(tr);

container.appendChild(thead);
thead.appendChild(tr);

for(let i = 0; i < headerList.length; i++){
    th = document.createElement('th');
    th.textContent = headerList[i];
    tr.appendChild(th);
}

container.appendChild(tbody);
tbody.appendChild(tr);

for(let i = 0; i < dataList.length; i++){
    td = document.createElement('td');
    td.textContent = dataList[i];
    tr.appendChild(td);
}

Answer 3

Answer №2

Right here:

function generateTable(headers, data) {
    let table = document.createElement("table");
    let headerList = headers;
    let dataList = data;

    var thead = document.createElement("thead");
    table.appendChild(thead);

    var tbody = document.createElement("tbody");
    table.appendChild(tbody);

    (function () {
        var headerArray = headerList.split(", ");
        var row = document.createElement("tr");
        thead.appendChild(row);

        for (var i = 0; i < headerArray.length; i++) {
            var headerCell = document.createElement("th");
            headerCell.innerText = headerArray[i];
            row.appendChild(headerCell);
        }
    })();

    (function () {
        var dataArray = [];
        for (var i = 0; i < dataList.length; i++) {
            dataArray.push(dataList[i].split(", "));
        }

        var longestRow = dataArray.reduce((a, b) => (a.length > b.length ? a : b), []);
        for (var i = 0; i < longestRow.length; i++) {
            var row = document.createElement("tr");
            tbody.appendChild(row);
        }

        var rows = tbody.childNodes;

        for (var i = 0; i < dataArray.length; i++) {
            for (var x = 0; x < dataArray[i].length; x++) {
                var cell = document.createElement("td");
                cell.innerText = dataArray[i][x];
                rows[x].appendChild(cell);
            }
        }

        for (var i = 0; i < rows.length; i++) {
            for (var x = 0; x < rows[i].childNodes.length; x++) {
                if (rows[i].childNodes.length !== longestRow.length - 1) {
                    var cell = document.createElement("td");
                    rows[i].appendChild(cell);
                }
            }
        }
    })();

    return table;
}

/* --- Usage --- */

var headerList = "Header A, Header B, Header C";
var dataList = ["DATA1, DATA1, DATA1", "DATA2, DATA2"];

var finalTable = generateTable(headerList, dataList);
document.body.appendChild(finalTable);

This function will create a table with the specified headers and data, which you can then insert into the DOM using .appendChild(table).

It is recommended to use nested arrays instead of strings for better structure and organization.

Answer 4

Right here:

function generateTable(headers, data) {
    let table = document.createElement("table");
    let headerList = headers;
    let dataList = data;

    var thead = document.createElement("thead");
    table.appendChild(thead);

    var tbody = document.createElement("tbody");
    table.appendChild(tbody);

    (function () {
        var headerArray = headerList.split(", ");
        var row = document.createElement("tr");
        thead.appendChild(row);

        for (var i = 0; i < headerArray.length; i++) {
            var headerCell = document.createElement("th");
            headerCell.innerText = headerArray[i];
            row.appendChild(headerCell);
        }
    })();

    (function () {
        var dataArray = [];
        for (var i = 0; i < dataList.length; i++) {
            dataArray.push(dataList[i].split(", "));
        }

        var longestRow = dataArray.reduce((a, b) => (a.length > b.length ? a : b), []);
        for (var i = 0; i < longestRow.length; i++) {
            var row = document.createElement("tr");
            tbody.appendChild(row);
        }

        var rows = tbody.childNodes;

        for (var i = 0; i < dataArray.length; i++) {
            for (var x = 0; x < dataArray[i].length; x++) {
                var cell = document.createElement("td");
                cell.innerText = dataArray[i][x];
                rows[x].appendChild(cell);
            }
        }

        for (var i = 0; i < rows.length; i++) {
            for (var x = 0; x < rows[i].childNodes.length; x++) {
                if (rows[i].childNodes.length !== longestRow.length - 1) {
                    var cell = document.createElement("td");
                    rows[i].appendChild(cell);
                }
            }
        }
    })();

    return table;
}

/* --- Usage --- */

var headerList = "Header A, Header B, Header C";
var dataList = ["DATA1, DATA1, DATA1", "DATA2, DATA2"];

var finalTable = generateTable(headerList, dataList);
document.body.appendChild(finalTable);

This function will create a table with the specified headers and data, which you can then insert into the DOM using .appendChild(table).

It is recommended to use nested arrays instead of strings for better structure and organization.

Answer 5

Answer №3

Solution

function createHtmlTable(headers, bodyData) {
  var headersArray = headers.split(",");
  var tableHtml = "<table>";
  var tableHeader = "<thead><tr>";
  var tableBody = "<tbody>";
  var dataArray = [];
  var orderArray = [];
  var responseArray = [];
  const bodyDataLength = bodyData[0][0].split(",").length;

  // Create Table Header
  headersArray.forEach((header) => {
    tableHeader += "<th>" + header + "</th>";
  });

  // Create Order Array
  for (var i = 0; i < bodyDataLength; i++) {
    orderArray = [];
    bodyData.forEach((bodyElement) => {
      bodyElement.forEach((internalBodyElement) => {
        dataArray = internalBodyElement.split(",");
        dataArray.forEach((element, key) => {
          if (key == i) {
            orderArray.push(element);
          }
        });
      });
    });
    responseArray.push(orderArray);
  }

  // Create Table Body
  responseArray.forEach((dataList) => {
    tableBody += "<tr>";

    dataList.forEach((element) => {
      tableBody += "<td>" + element + "</td>";
    });

    tableBody += "</tr>";
  });

  tableHtml =
    "<table>" +
    tableHeader +
    "</tr></thead>" +
    tableBody +
    "</tbody>" +
    "</table>";
  return tableHtml;
}

Answer 6

Solution

function createHtmlTable(headers, bodyData) {
  var headersArray = headers.split(",");
  var tableHtml = "<table>";
  var tableHeader = "<thead><tr>";
  var tableBody = "<tbody>";
  var dataArray = [];
  var orderArray = [];
  var responseArray = [];
  const bodyDataLength = bodyData[0][0].split(",").length;

  // Create Table Header
  headersArray.forEach((header) => {
    tableHeader += "<th>" + header + "</th>";
  });

  // Create Order Array
  for (var i = 0; i < bodyDataLength; i++) {
    orderArray = [];
    bodyData.forEach((bodyElement) => {
      bodyElement.forEach((internalBodyElement) => {
        dataArray = internalBodyElement.split(",");
        dataArray.forEach((element, key) => {
          if (key == i) {
            orderArray.push(element);
          }
        });
      });
    });
    responseArray.push(orderArray);
  }

  // Create Table Body
  responseArray.forEach((dataList) => {
    tableBody += "<tr>";

    dataList.forEach((element) => {
      tableBody += "<td>" + element + "</td>";
    });

    tableBody += "</tr>";
  });

  tableHtml =
    "<table>" +
    tableHeader +
    "</tr></thead>" +
    tableBody +
    "</tbody>" +
    "</table>";
  return tableHtml;
}

Javascript technique for creating tables from arrays of comma-separated strings

Answer №1

Answer №2

Answer №3

Similar questions

Angular2 and ES6 Promise in JavaScript - tackling the issue of undefined variables

Update a specific division

Having trouble with Sequelize Single Instance not functioning properly after using Module.exports?

Updating language settings on-the-fly in a Vue application does not automatically refresh the translated content displayed on the website

Developing a Javascript widget feature

When using MongoDB/Mongoose, a comment can be pushed into an array upon saving. Within the array, each comment is accompanied by its respective date

Tips on adding an array value to the XPath syntax while conducting a search in Selenium IDE

Error in JSON parsing: Unexpected token 'u' at the beginning of the input in Angular2

Using AngularJS Material's mdDialog to show locally stored data in a template

Creating a connection between my .html and .ejs files: A step-by-step guide

Tips for displaying a specific array in react JS using the map function

Applying a CSS class (or style) dynamically depending on the variable with the help of a directive

What is the best way to transfer attributes from a stateful component to an event handler within a Higher Order Component that encloses a child component?

Index similar to JavaScript-Meadow

Vue.js compatibility issue with SelectBoxIt jq plugin causing malfunction

ReactJS rendering Express data as numbers instead of JSON format

Angular Material's md-checkbox is a required component

Issues encountered while attempting to convert a class component to a functional component in React

What could be causing my RestFul API built with express and nodejs to crash every day?

Latest Information Regarding Mongodb Aggregate Operations