Conditional Statement in QML

Question

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

How do I handle the conditional statement in QML like if else statement in C? I have to read PinDirection from the json file then decide which qml object (e.g. Switch or Slider) to load. — Clive N, Jun 12 '23 at 21:17
I need to be able to scan the json file and read value of PinDirection, if PinDirection is Output and Pintype is analog, I want to use the Slider QML type otherwise use Switch QML type — Clive N, Jun 12 '23 at 23:15
You really need to complete your question and add the Slider and Switch to the description. The way your question read is incomplete/ambiguous, since, of course, QML supports Javascript, and your current `if` statement is valid JavaScript. The inclusion of the Slider and Switch components disambiguates the question of how to selectively display a QML component. One "simple" way to implement what you want is to include both Slider and Switch but just assign the `visible` property to positive or negative versions of your conditional respectively. — Stephen Quan, Jun 13 '23 at 06:38
Another solution is to assign the `ccu3` subobject to a model and make use of `DelegateChooser` to instantiate the appropriate delegate/component based on "PinDirection" value. — Stephen Quan, Jun 13 '23 at 06:43

score 0 · Answer 1 · answered Jun 13 '23 at 23:09

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!

Conditional Statement in QML

1 Answers1