How to format JavaScript generated HTML code?

Question

I am trying to make a function which can generate tables from the data passed. The data is supposed to be in this format:

let tableContent = [
  [
    {
      type: "td",
      content: "Hello!",
    },
  ],
  [
    {
      type: "td",
      content: "Hello!",
    },
  ],
];

Here the entire array is one table, arrays inside it are rows, and objects inside them are data for each cell inside the row.

The problem is that when I use this function on this data:

function makeTable(tableArray) {
  //Entire Table
  let tableTemplate;
  let tableContent = "";

  //row level variables
  let rowTemplate;
  let rowContent = "";

  //cell level variables
  let cellType;
  let cellContent;
  let cellTemplate;

  //running function for each row
  tableArray.forEach((row) => {
    //running function for each cell
    row.forEach((cell) => {
      cellType = cell.type || "td";
      if (cellType !== "td" && cellType !== "th")
        return console.error(
          `Error: The type of a cell must be either "td" or "th" you passed "${cellType}"!`
        );
      cellContent = cell.content;
      cellTemplate = `<${cellType}>${cellContent}</${cellType}>`;
      rowContent += cellTemplate;
    });

    rowTemplate = `<tr>${rowContent}</tr>`;
    tableContent += rowTemplate;
    rowContent = ""
  });

  tableTemplate = `<table>${tableContent}</table>`;
  return tableTemplate;
}
//this function outputs:
//<table><tr><td>Hello!</td></tr><tr><td>Hello!</td></tr></table>
//if used on the above data

The table is formed on one single line. I want that the code generated is nicely indented and easily readable. I know that this is not important as the main functionality of the function is to generate tables not code. But still so that it is easier to understand the generated code, I want it to be readable. My question is how can apply indentations to the generated code?

Thanks for reading my query!

I tried messing around with them but for more complex tables this is messing it up — Code Fingers
– Code Fingers, Commented Aug 12, 2021 at 9:10
Define: Isn't working. Do you mean you're trying to output the string to the console but you dont get tabs/ line feeds? — Jamiec
– Jamiec, Commented Aug 12, 2021 at 9:11
Do you know Document.createElement()? it would really help you out. developer.mozilla.org/en-US/docs/Web/API/Document/createElement — Adil Bimzagh
– Adil Bimzagh, Commented Aug 12, 2021 at 9:11

Jamiec · Accepted Answer · 2021-08-12 09:17:57Z

1

You can simply use \t for tabs to indent (or a couple of spaces if you prefer) and \r\n for newlines.

Something like this for example:

function makeTable(tableArray) {
  //Entire Table
  let tableTemplate;
  let tableContent = "";

  //row level variables
  let rowTemplate;
  let rowContent = "";

  //cell level variables
  let cellType;
  let cellContent;
  let cellTemplate;

  //running function for each row
  tableArray.forEach((row) => {
    //running function for each cell
    row.forEach((cell) => {
      cellType = cell.type || "td";
      if (cellType !== "td" && cellType !== "th")
        return console.error(
          `Error: The type of a cell must be either "td" or "th" you passed "${cellType}"!`
        );
      cellContent = cell.content;
      cellTemplate = `\t\t<${cellType}>${cellContent}</${cellType}>\r\n`;
      rowContent += cellTemplate;
    });

    rowTemplate = `\t<tr>\r\n${rowContent}\t</tr>\r\n`;
    tableContent += rowTemplate;
    rowContent = ""
  });

  tableTemplate = `<table>\r\n${tableContent}</table>`;
  return tableTemplate;
}

let tableContent = [
  [
    {
      type: "td",
      content: "Hello!",
    },
  ],
  [
    {
      type: "td",
      content: "Hello!",
    },
  ],
];

console.log(makeTable(tableContent))

answered Aug 12, 2021 at 9:17

Jamiec

136k15 gold badges142 silver badges202 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Code Fingers Over a year ago

I don't think I have another option. I just wanted the code formatting to be done by something else instead of manual. Just so that I can confirm that the code will always format correctly but still this works so thanks!

Collectives™ on Stack Overflow

How to format JavaScript generated HTML code?

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related