Json to htmlTable

Describe the issue/error/question

I am trying to take a json input and output it as a HTML table.
Found the below JAva info to use but I do not know how to modify it to work in a Function Node.

In this case there is dummy data but I would like to replace that with the previous nodes Json data going forward?

What is the error message (if any)?

Please share the workflow

(Select the nodes and use the keyboard shortcuts CMD+C/CTRL+C and CMD+V/CTRL+V to copy and paste the workflow respectively)

{
  "nodes": [
    {
      "parameters": {
        "functionCode": "var myList = [\n  { \"name\": \"abc\", \"age\": 50 },\n  { \"age\": \"25\", \"hobby\": \"swimming\" },\n  { \"name\": \"xyz\", \"hobby\": \"programming\" }\n];\n\n// Builds the HTML Table out of myList.\nfunction buildHtmlTable(selector) {\n  var columns = addAllColumnHeaders(myList, selector);\n\n  for (var i = 0; i < myList.length; i++) {\n    var row$ = $('<tr/>');\n    for (var colIndex = 0; colIndex < columns.length; colIndex++) {\n      var cellValue = myList[i][columns[colIndex]];\n      if (cellValue == null) cellValue = \"\";\n      row$.append($('<td/>').html(cellValue));\n    }\n    $(selector).append(row$);\n  }\n}\n\n// Adds a header row to the table and returns the set of columns.\n// Need to do union of keys from all records as some records may not contain\n// all records.\nfunction addAllColumnHeaders(myList, selector) {\n  var columnSet = [];\n  var headerTr$ = $('<tr/>');\n\n  for (var i = 0; i < myList.length; i++) {\n    var rowHash = myList[i];\n    for (var key in rowHash) {\n      if ($.inArray(key, columnSet) == -1) {\n        columnSet.push(key);\n        headerTr$.append($('<th/>').html(key));\n      }\n    }\n  }\n  $(selector).append(headerTr$);\n\n  return columnSet;\n}"
      },
      "name": "Function",
      "type": "n8n-nodes-base.function",
      "typeVersion": 1,
      "position": [
        -1420,
        -200
      ]
    }
  ],
  "connections": {}
}

Share the output returned by the last node

Information on your n8n setup

  • **n8n version:0.156.0
  • **Database you’re using (default: SQLite):sqlite
  • Running n8n with the execution process [own(default), main]:
  • Running n8n via [Docker, npm, n8n.cloud, desktop app]:

Any assistance would be appreciated.

Hi @mvandyk, I think the easiest way of building an HTML table in n8n would be via the Spreadsheet File node.

Here’s an example workflow, if you just need the binary file you wouldn’t need the last Move Binary Data node. The Function node only sets dummy data in this example, so would also not be required when working with actual data:

Example Workflow
{
  "nodes": [
    {
      "parameters": {
        "setAllData": false,
        "options": {}
      },
      "name": "Move Binary Data",
      "type": "n8n-nodes-base.moveBinaryData",
      "typeVersion": 1,
      "position": [
        1000,
        500
      ]
    },
    {
      "parameters": {},
      "name": "Start",
      "type": "n8n-nodes-base.start",
      "typeVersion": 1,
      "position": [
        240,
        300
      ]
    },
    {
      "parameters": {
        "functionCode": "var myList = [\n  { \"name\": \"abc\", \"age\": 50 },\n  { \"age\": \"25\", \"hobby\": \"swimming\" },\n  { \"name\": \"xyz\", \"hobby\": \"programming\" }\n];\n\nreturn myList.map(e => {\n  return {\n    json: e\n  }\n});"
      },
      "name": "Function",
      "type": "n8n-nodes-base.function",
      "typeVersion": 1,
      "position": [
        560,
        500
      ]
    },
    {
      "parameters": {
        "operation": "toFile",
        "fileFormat": "html",
        "options": {}
      },
      "name": "Spreadsheet File",
      "type": "n8n-nodes-base.spreadsheetFile",
      "typeVersion": 1,
      "position": [
        780,
        500
      ]
    },
    {
      "parameters": {
        "setAllData": false,
        "options": {}
      },
      "name": "Move Binary Data",
      "type": "n8n-nodes-base.moveBinaryData",
      "typeVersion": 1,
      "position": [
        1000,
        500
      ]
    }
  ],
  "connections": {
    "Start": {
      "main": [
        [
          {
            "node": "Function",
            "type": "main",
            "index": 0
          }
        ]
      ]
    },
    "Function": {
      "main": [
        [
          {
            "node": "Spreadsheet File",
            "type": "main",
            "index": 0
          }
        ]
      ]
    },
    "Spreadsheet File": {
      "main": [
        [
          {
            "node": "Move Binary Data",
            "type": "main",
            "index": 0
          }
        ]
      ]
    }
  }
}

Thanks, I saw this Example.

I would like thr result to go into a “Webhook Reply” as a table? Could I do this without the spreadsheet file as I need to keep time down? I have made a workaround for my scenario (where I only have 3 columns

In Set I just add the html table tabs “{{$node[“Http”].json[“item1”]}}” in the end I add the rest of the html detail