HTML extract: How to do if/else condition within the node?

I’ve the following html

<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
    <style type="text/css" style="display:none;">
        P {margin-top:0;margin-bottom:0;}
    </style>
</head>

<body dir="ltr">
    <div>
        <div dir="ltr">
            <div style="font-family:Calibri,Arial,Helvetica,sans-serif; font-size:12pt; color:rgb(0,0,0)">
                <table style="font-family:arial,sans-serif; border-collapse:collapse; width:798px; font-size:medium; orphans:2; widows:2">
                    <tbody>
                        <tr>
                            <th style="border:1px solid rgb(221,221,221); text-align:left; padding:8px">System</th>
                            <th style="border:1px solid rgb(221,221,221); text-align:left; padding:8px">Priority</th>
                            <th style="border:1px solid rgb(221,221,221); text-align:left; padding:8px">Country</th>
                        </tr>
                        <tr style="background-color:rgb(150,221,221)">
                            <td style="border:1px solid rgb(221,221,221); text-align:left; padding:8px">Linux</td>
                            <td style="border:1px solid rgb(221,221,221); text-align:left; padding:8px">High</td>
                            <td style="border:1px solid rgb(221,221,221); text-align:left; padding:8px">Germany</td>
                        </tr>
                        <tr>
                            <td style="border:1px solid rgb(221,221,221); text-align:left; padding:8px">Windows</td>
                            <td style="border:1px solid rgb(221,221,221); text-align:left; padding:8px">Medium</td>
                            <td style="border:1px solid rgb(221,221,221); text-align:left; padding:8px">Mexico</td>
                        </tr>
                        <tr style="background-color:rgb(221,221,221)">
                            <td style="border:1px solid rgb(221,221,221); text-align:left; padding:8px">AIX</td>
                            <td style="border:1px solid rgb(221,221,221); text-align:left; padding:8px">Low</td>
                            <td style="border:1px solid rgb(221,221,221); text-align:left; padding:8px">Austria</td>
                        </tr>
                    </tbody>
                </table>
            </div>
        </div>
    </div>
</body>
</html>

The aim is to extract and send

  • Rows with => background-color:rgb(150,221,221) , then send those ROWS to node1 (for action2)
  • When cells of “system == Windows” , then send those ROWS to node2 (for action2)

I was able to extract the rows table>tbody>tr as below

But How to send the data into different nodes based on condition? Is there any place I can write conditions within the HTML extract? I’ve written IF node outside the HTML extract, but it either receives “attributes” or Extracted fields only. But I’m looking for the entire ROW data to maintain the relation. Hence was looking for an if/else condition within the HTML extract node

Hi @getk, the HTML Extract node only has one output, so it would always send all results to it without applying additional conditions. So you’d always need to use additional nodes for filtering.

Seeing you would like to keep the entire row data, the first thing I’d do here would be to convert each row into individual n8n items. This can be done using the Item Lists node:

You could then use two IF nodes to check each condition separately and perform the actions you have in mind:

Example Workflow
{
  "nodes": [
    {
      "parameters": {},
      "name": "Start",
      "type": "n8n-nodes-base.start",
      "typeVersion": 1,
      "position": [
        240,
        300
      ]
    },
    {
      "parameters": {
        "fieldToSplitOut": "rows",
        "options": {
          "destinationFieldName": "row"
        }
      },
      "name": "Item Lists",
      "type": "n8n-nodes-base.itemLists",
      "typeVersion": 1,
      "position": [
        900,
        300
      ]
    },
    {
      "parameters": {
        "values": {
          "string": [
            {
              "name": "textHtml",
              "value": "<html>\n<head>\n    <meta http-equiv=\"Content-Type\" content=\"text/html; charset=iso-8859-1\">\n    <style type=\"text/css\" style=\"display:none;\">\n        P {margin-top:0;margin-bottom:0;}\n    </style>\n</head>\n\n<body dir=\"ltr\">\n    <div>\n        <div dir=\"ltr\">\n            <div style=\"font-family:Calibri,Arial,Helvetica,sans-serif; font-size:12pt; color:rgb(0,0,0)\">\n                <table style=\"font-family:arial,sans-serif; border-collapse:collapse; width:798px; font-size:medium; orphans:2; widows:2\">\n                    <tbody>\n                        <tr>\n                            <th style=\"border:1px solid rgb(221,221,221); text-align:left; padding:8px\">System</th>\n                            <th style=\"border:1px solid rgb(221,221,221); text-align:left; padding:8px\">Priority</th>\n                            <th style=\"border:1px solid rgb(221,221,221); text-align:left; padding:8px\">Country</th>\n                        </tr>\n                        <tr style=\"background-color:rgb(150,221,221)\">\n                            <td style=\"border:1px solid rgb(221,221,221); text-align:left; padding:8px\">Linux</td>\n                            <td style=\"border:1px solid rgb(221,221,221); text-align:left; padding:8px\">High</td>\n                            <td style=\"border:1px solid rgb(221,221,221); text-align:left; padding:8px\">Germany</td>\n                        </tr>\n                        <tr>\n                            <td style=\"border:1px solid rgb(221,221,221); text-align:left; padding:8px\">Windows</td>\n                            <td style=\"border:1px solid rgb(221,221,221); text-align:left; padding:8px\">Medium</td>\n                            <td style=\"border:1px solid rgb(221,221,221); text-align:left; padding:8px\">Mexico</td>\n                        </tr>\n                        <tr style=\"background-color:rgb(221,221,221)\">\n                            <td style=\"border:1px solid rgb(221,221,221); text-align:left; padding:8px\">AIX</td>\n                            <td style=\"border:1px solid rgb(221,221,221); text-align:left; padding:8px\">Low</td>\n                            <td style=\"border:1px solid rgb(221,221,221); text-align:left; padding:8px\">Austria</td>\n                        </tr>\n                    </tbody>\n                </table>\n            </div>\n        </div>\n    </div>\n</body>\n</html>"
            }
          ]
        },
        "options": {}
      },
      "name": "Set Dummy Data",
      "type": "n8n-nodes-base.set",
      "typeVersion": 1,
      "position": [
        460,
        300
      ]
    },
    {
      "parameters": {
        "dataPropertyName": "textHtml",
        "extractionValues": {
          "values": [
            {
              "key": "rows",
              "cssSelector": "table>tbody>tr",
              "returnValue": "html",
              "returnArray": true
            }
          ]
        },
        "options": {}
      },
      "name": "Extract Rows",
      "type": "n8n-nodes-base.htmlExtract",
      "typeVersion": 1,
      "position": [
        680,
        300
      ]
    },
    {
      "parameters": {
        "conditions": {
          "string": [
            {
              "value1": "={{$json[\"row\"]}}",
              "operation": "contains",
              "value2": "rgb(221,221,221)"
            }
          ]
        }
      },
      "name": "Contains rgb(221,221,221)?",
      "type": "n8n-nodes-base.if",
      "typeVersion": 1,
      "position": [
        1120,
        200
      ]
    },
    {
      "parameters": {
        "conditions": {
          "string": [
            {
              "value1": "={{$json[\"row\"]}}",
              "operation": "contains",
              "value2": "Windows"
            }
          ]
        }
      },
      "name": "Contains Windows",
      "type": "n8n-nodes-base.if",
      "typeVersion": 1,
      "position": [
        1120,
        400
      ]
    },
    {
      "parameters": {},
      "name": "Action 1",
      "type": "n8n-nodes-base.noOp",
      "typeVersion": 1,
      "position": [
        1340,
        200
      ]
    },
    {
      "parameters": {},
      "name": "Action 2",
      "type": "n8n-nodes-base.noOp",
      "typeVersion": 1,
      "position": [
        1340,
        400
      ]
    }
  ],
  "connections": {
    "Start": {
      "main": [
        [
          {
            "node": "Set Dummy Data",
            "type": "main",
            "index": 0
          }
        ]
      ]
    },
    "Item Lists": {
      "main": [
        [
          {
            "node": "Contains rgb(221,221,221)?",
            "type": "main",
            "index": 0
          },
          {
            "node": "Contains Windows",
            "type": "main",
            "index": 0
          }
        ]
      ]
    },
    "Set Dummy Data": {
      "main": [
        [
          {
            "node": "Extract Rows",
            "type": "main",
            "index": 0
          }
        ]
      ]
    },
    "Extract Rows": {
      "main": [
        [
          {
            "node": "Item Lists",
            "type": "main",
            "index": 0
          }
        ]
      ]
    },
    "Contains rgb(221,221,221)?": {
      "main": [
        [
          {
            "node": "Action 1",
            "type": "main",
            "index": 0
          }
        ]
      ]
    },
    "Contains Windows": {
      "main": [
        [
          {
            "node": "Action 2",
            "type": "main",
            "index": 0
          }
        ]
      ]
    }
  }
}

The entire row would be available after both IF nodes in the above example:

Hope this helps!

1 Like

thanks a lot @MutedJam . This answer is very comprehensive and well explained. I will try this out and again much appreciated

1 Like