Conditional Statement in QML

I have a .json file in my project that looks as follows:

{
   "ccu3":[
      {
         "PinName":"J1-13",
         "PinDirection":"Input",
         "PinType":"digital",
         "System Function":"Park Lights"
      },
      {
         "PinName":"J1-104",
         "PinDirection":"Input",
         "PinType":"analogue",
         "System Function":"Hydraulic Temp"
      },
      {
         "PinName": "J2-45" , 
         "PinDirection":"Input", 
         "PinType":"tristate", 
         "System Function" : "Auto Greaser Pressure Sw"
     }
   ]
}

I can extract "Pin Direction" and "PinType" from .json file as follows:

Text
{
    text: jsonLoader.jsonObject["ccu3"][index]["PinDirection"]
    color: "white"
    font.pointSize: 10
}

Text
{
    text: jsonLoader.jsonObject["ccu3"][index]["PinType"]
    color: "white"
    font.pointSize: 10
}

If 'PinDirection' is 'output' and 'PinType' is 'digital', I must display the PinName along with the Switch, else if 'PinDirection' is 'output' and 'PinType' is 'analogue', display Pin Name along with the Slider.

How do I make this conditional statement in QML? I'm also using the repeater to call the relevant .qml file for display.

My background is C and just started using QML. I only understand if else statement

As mentioned in the comments, one solution is to control visibility, e.g.

            ColumnLayout {
                visible: modelData.PinDirection === 'output'
                      && modelData.PinType === 'digital'
                Text {
                    text: modelData.PinName
                }
                Switch {
                }
            }

Here's a full working example:

import QtQuick
import QtQuick.Controls
import QtQuick.Layouts
import Qt.labs.qmlmodels
Page {
    id: page
    background: Rectangle { color: "#848895" }
    property var jsonObject: ({
        "ccu3":[
            {
                "PinName":"J1-13",
                "PinDirection":"Input",
                "PinType":"digital",
                "System Function":"Park Lights"
            },
            {
                "PinName":"J1-104",
                "PinDirection":"Input",
                "PinType":"analogue",
                "System Function":"Hydraulic Temp"
            },
            {
                "PinName": "J2-45" , 
                "PinDirection":"Input", 
                "PinType":"tristate", 
                "System Function" : "Auto Greaser Pressure Sw"
            },
            {
                "PinName": "J9-99" , 
                "PinDirection":"Output", 
                "PinType":"tristate", 
                "System Function" : "Test Output"
            }
        ]
    })
    ListView {
        width: 500
        height: 500
        model: jsonObject.ccu3
        delegate: ColumnLayout {
            ColumnLayout {
                visible: modelData.PinDirection === 'output'
                && modelData.PinType === 'digital'
                Text {
                    text: modelData.PinName
                }
                Switch {
                }
            }
            Text {
                text: modelData.PinDirection
            }
            Text {
                text: modelData.PinType
            }
        }
    }
}

You can Try it Online!