Need help to create custom html table from table input?

#help I want to get the following table as HTML output but don’t know how to do it. can some one help

image

{
  "name": "Array to custom excel output",
  "nodes": [
    {
      "parameters": {
        "functionCode": "return [\r\n  \r\n{\"data\": [\r\n  {\r\n    \"Client_Name\": \"John\",\r\n    \"Id\": \"849\",\r\n    \"Group\": \"Ultra\",\r\n    \"Score\": \"90\",\r\n    \"Result\": \"Pass\",\r\n    \"Manager\": \"Benny Daniel\",\r\n    \"Location\": \"Onsite\"\r\n\r\n  },\r\n  {\r\n    \"Client_Name\": \"John\",\r\n    \"Id\": \"849\",\r\n    \"Group\": \"Mega\",\r\n    \"Score\": \"30\",\r\n    \"Result\": \"Fail\",\r\n    \"Manager\": \"Benny Daniel\",\r\n    \"Location\": \"Offshore\"\r\n  },\r\n  {\r\n    \"Client_Name\": \"John\",\r\n    \"Id\": \"849\",\r\n    \"Group\": \"Snow\",\r\n    \"Score\": \"70\",\r\n    \"Result\": \"Pass\",\r\n    \"Manager\": \"Benny Daniel\",\r\n    \"Location\": \"Onsite\"\r\n  }\r\n]\r\n\r\n}\r\n\r\n];"
      },
      "name": "Mock Data",
      "type": "n8n-nodes-base.function",
      "position": [
        100,
        400
      ],
      "typeVersion": 1,
      "id": "0dd02d74-1494-42d4-8e40-88232adbea0d"
    },
    {
      "parameters": {},
      "name": "Start",
      "type": "n8n-nodes-base.start",
      "typeVersion": 1,
      "position": [
        -100,
        400
      ],
      "id": "e69c9934-457a-4587-b2ee-396f38ff3d48"
    },
    {
      "parameters": {
        "operation": "toFile",
        "fileFormat": "html",
        "options": {}
      },
      "id": "833bfa25-f4a5-4903-8747-b635eb4bceb2",
      "name": "Spreadsheet File",
      "type": "n8n-nodes-base.spreadsheetFile",
      "typeVersion": 1,
      "position": [
        1660,
        620
      ]
    },
    {
      "parameters": {
        "keepOnlySet": true,
        "values": {
          "string": [
            {
              "name": "Client_Name",
              "value": "={{$json[\"data\"][0][\"Client_Name\"]}}"
            },
            {
              "name": "Manager",
              "value": "={{$json[\"data\"][0][\"Manager\"]}}"
            },
            {
              "name": "id",
              "value": "={{$json[\"data\"][0][\"Id\"]}}"
            }
          ]
        },
        "options": {}
      },
      "id": "68d6ec24-5adb-40c2-ad21-33e4e594fcd4",
      "name": "Set",
      "type": "n8n-nodes-base.set",
      "typeVersion": 1,
      "position": [
        500,
        240
      ]
    },
    {
      "parameters": {
        "fieldToSplitOut": "data",
        "options": {}
      },
      "id": "c97b78f6-07c3-4385-ad0a-50a235a1fa63",
      "name": "Item Lists",
      "type": "n8n-nodes-base.itemLists",
      "typeVersion": 1,
      "position": [
        280,
        600
      ]
    },
    {
      "parameters": {},
      "id": "b9b2ab4b-b9ee-428d-ba8e-79458014ff32",
      "name": "Merge",
      "type": "n8n-nodes-base.merge",
      "typeVersion": 1,
      "position": [
        780,
        400
      ]
    },
    {
      "parameters": {
        "keepOnlySet": true,
        "values": {
          "string": [
            {
              "name": "Group",
              "value": "={{$json[\"Group\"]}}"
            },
            {
              "name": "Score",
              "value": "={{$json[\"Score\"]}}"
            },
            {
              "name": "Result",
              "value": "={{$json[\"Result\"]}}"
            },
            {
              "name": "Location",
              "value": "={{$json[\"Location\"]}}"
            }
          ]
        },
        "options": {}
      },
      "id": "3ed6760a-381e-4724-ba82-50fd910b3cca",
      "name": "Set1",
      "type": "n8n-nodes-base.set",
      "typeVersion": 1,
      "position": [
        1080,
        600
      ]
    },
    {
      "parameters": {
        "keepOnlySet": true,
        "values": {
          "string": [
            {
              "name": " ",
              "value": "="
            },
            {
              "name": " ",
              "value": "="
            },
            {
              "name": " ",
              "value": "="
            }
          ]
        },
        "options": {}
      },
      "id": "5033b227-310b-496e-a9a9-43a58c3e2742",
      "name": "Set2",
      "type": "n8n-nodes-base.set",
      "typeVersion": 1,
      "position": [
        440,
        380
      ],
      "executeOnce": true
    },
    {
      "parameters": {
        "values": {
          "string": [
            {
              "name": " ",
              "value": "="
            },
            {
              "name": " ",
              "value": "="
            },
            {
              "name": " ",
              "value": "="
            }
          ]
        },
        "options": {}
      },
      "id": "dfb56214-1e4b-40a5-9103-3e7255c08d11",
      "name": "Set4",
      "type": "n8n-nodes-base.set",
      "typeVersion": 1,
      "position": [
        560,
        380
      ]
    },
    {
      "parameters": {},
      "id": "9d255660-35d2-4bed-bdd5-6562734238cc",
      "name": "Merge1",
      "type": "n8n-nodes-base.merge",
      "typeVersion": 1,
      "position": [
        1460,
        620
      ]
    }
  ],
  "pinData": {},
  "connections": {
    "Mock Data": {
      "main": [
        [
          {
            "node": "Set",
            "type": "main",
            "index": 0
          },
          {
            "node": "Item Lists",
            "type": "main",
            "index": 0
          }
        ]
      ]
    },
    "Start": {
      "main": [
        [
          {
            "node": "Mock Data",
            "type": "main",
            "index": 0
          }
        ]
      ]
    },
    "Set": {
      "main": [
        [
          {
            "node": "Merge",
            "type": "main",
            "index": 0
          }
        ]
      ]
    },
    "Item Lists": {
      "main": [
        [
          {
            "node": "Set2",
            "type": "main",
            "index": 0
          },
          {
            "node": "Set1",
            "type": "main",
            "index": 0
          }
        ]
      ]
    },
    "Merge": {
      "main": [
        [
          {
            "node": "Merge1",
            "type": "main",
            "index": 0
          }
        ]
      ]
    },
    "Set1": {
      "main": [
        [
          {
            "node": "Merge1",
            "type": "main",
            "index": 1
          }
        ]
      ]
    },
    "Set2": {
      "main": [
        [
          {
            "node": "Set4",
            "type": "main",
            "index": 0
          }
        ]
      ]
    },
    "Set4": {
      "main": [
        [
          {
            "node": "Merge",
            "type": "main",
            "index": 1
          }
        ]
      ]
    },
    "Merge1": {
      "main": [
        [
          {
            "node": "Spreadsheet File",
            "type": "main",
            "index": 0
          }
        ]
      ]
    }
  },
  "active": false,
  "settings": {},
  "id": 101,
  "meta": {
    "instanceId": "0e20cef9c9bba17c5528d3ea1525f1c5ece473d6d33b3a4583ea4a3f2359475a"
  },
  "tags": []
}```

Hi @Priya_Kumar, two basic workflows on how to create an HTML table can be found here:

These example will also work with the mock data you have posted. You’d just need to make sure you have the column headers as your top level JSON keys. Here’s a quick example using the JS Function approach:

HTML table result:

1 Like