17

How do you check if a property is undefined in qml?

This is what I am trying to do:

Button {
    id: myButton
    text: if (text === "undefined"){"default text"}
}
muru
  • 193,181
  • 53
  • 473
  • 722
Anon
  • 11,863
  • 22
  • 66
  • 122

3 Answers3

13

Try: text: text ? text : "default text"

"undefined" is just a string representation of a reference not referencing anything, just like None, or NULL in other languages.

=== is strict comparison operator, you might want to read this thread: https://stackoverflow.com/questions/523643/difference-between-and-in-javascript

Community
  • 1
Kissiel
  • 256
  • 2
  • 2
  • That was a very clever solution. Thanks. Just to explain to anyone else; its sort of like saying (correct me if I am wrong) if (text === text){text} else{"default text"} – Anon Sep 24 '14 at 14:49
  • 2
    `if (text) { text } else {"default text"}` to be exact. `if (object)` evaluates to false if `object` is undefined. Similar hack to C-style if(pointer) that evaluates to false if pointer has a value of 0 (NULL). It's worth noting that `text` variable used for text property of a button is taken from outside scope. It'll be much clearer with: `text: inText ? inText : "default text"`, or `if(inText) { text } else {"default text"}` – Kissiel Sep 24 '14 at 16:19
  • Sorry to be daft, but this is something I never quite understood. In logic, it would technically read as this - `if (text is true) then {text = text} else {text = "default text"}` -- is this accurate? – Anon Sep 24 '14 at 16:25
  • 2
    You're pretty much right. The only unintuitive thing about this pseudo-code is `if (text is true)`. I find it easier to think as `if (text *is*)` or `if (text exists)`. Another good source: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/undefined – Kissiel Sep 24 '14 at 16:47
  • 2
    This will fail with text = "" (empty string), the if will return false – RvdK Mar 16 '16 at 13:53
7
import QtQuick 2.3
import QtQuick.Controls 1.2

Button {
    id: myButton
    text: text ? text : "default text"
}

This answer throws a warning for me.

QML Button: Binding loop detected for property "text"

Changing text to modelText instead throws an error.

ReferenceError: modelText is not defined

This stops the Javascript execution for me; i.e. the next line isn't called.

Via Javascript

The same happens when setting it via Javascript, but is quite verbose.

import QtQuick 2.3
import QtQuick.Controls 1.2

Button {
    id: myButton
    text: "default text"

    Component.onCompleted: {
        if (modelText !== "undefined") {
            myButton.text = modelText;
        }
    }
}

Using typeof

The typeof operator mutes the error and works as expected.

import QtQuick 2.3
import QtQuick.Controls 1.2

Button {
    id: myButton
    text: "default text"

    Component.onCompleted: {
        if (typeof modelText !== "undefined") {
            myButton.text = modelText;
        }
    }
}
Marcus Ottosson
  • 171
  • 4
4

To compare with undefined you write text === undefined. This will evaluate to false if text is null.

If you want check if value is present (i.e., check for both undefined and null), use it as condition in if statement or ternary operator. If you need to store result of comparison as a boolean value, use var textPresent = !!text (though double ! might appear confusing to one reading the code).

tonytony
  • 141
  • 2