Question 108748 in Json Question posted in
Our archive of expertly curated questions and answers provides insights and solutions to common problems related to this popular data interchange format. From parsing and manipulating JSON data to integrating it with various programming languages and web services, our archive has got you covered. Start exploring today and take your JSON skills to the next level

Making use of json data inside QML

I’m trying to replace a text in my .qml file with a json data.
In my .qml file I have the following:

   Text
   {
       **text: qsTr("J1-25")**
       anchors.right: tc1.left
       anchors.rightMargin: 20
       anchors.verticalCenter: tc1.verticalCenter
       color: "white"
       font.pointSize: 10
   }

I created the .json file with the following info:

{
  "pwm":
    [
      {"id": "1", "pin": "J2-21"},
      {"id": "2", "pin": "J2-22"},
      {"id": "3", "pin": "J2-23"},
      {"id": "4", "pin": "J2-24"},
      {"id": "5", "pin": "J2-25"},
      {"id": "6", "pin": "J2-26"}
    ],
"truecurrent":
    [
      {"id": "1", "pin": "J1-21"},
      {"id": "2", "pin": "J1-22"},
      {"id": "3", "pin": "J1-23"},
      {"id": "4", "pin": "J1-24"},
      **{"id": "5", "pin": "J1-25"},**
      {"id": "6", "pin": "J1-26"}
  ]
}

How do I replace the text in my .qml with true current data in .json file (both in bold)?

JsonLoader {
    id: jsonLoader

    filePath: ":/example.json"

}

Text
{
    text: jsonLoader.jsonObject["truecurrent"]["5"]  //text: qsTr("J1-25")
    anchors.right: tc1.left
    anchors.rightMargin: 20
    anchors.verticalCenter: tc1.verticalCenter
    color: "white"
    font.pointSize: 10
}
Tags:

2

Answers


  1. 0

    You can use the JavaScript JSON parser. Here an example with a fixed string. You can load the string from file.

    function getData() {        
    // TODO: get the json string from file
    let data = "{
        "pwm":
            [
            {"id": "1", "pin": "J2-21"},
            {"id": "2", "pin": "J2-22"},
            {"id": "3", "pin": "J2-23"},
            {"id": "4", "pin": "J2-24"},
            {"id": "5", "pin": "J2-25"},
            {"id": "6", "pin": "J2-26"}
        ],
        "truecurrent":
            [
            {"id": "1", "pin": "J1-21"},
            {"id": "2", "pin": "J1-22"},
            {"id": "3", "pin": "J1-23"},
            {"id": "4", "pin": "J1-24"},
            {"id": "5", "pin": "J1-25"},
            {"id": "6", "pin": "J1-26"}
        ]
    }"

    // parse with JavaScript JSON parser
    return JSON.parse(data);
}

property var jsonData : getData();

Text
{
    anchors.fill: parent
    
    // access JSON data entries
    text: "Pin: " + jsonData.truecurrent[5].pin;
}
    Login or Signup to reply.
  2. 0

    You can use XMLHttpRequest to load both HTTP and FILE resources. In the following, if I declare data.json and place it in the same folder as my QML source file, I can use XMLHttpRequest with a relative reference to pick it up. You will be required to set
    "QML_XHR_ALLOW_FILE_READ" environment variable to "1" since without it, access to local files will be prevented in the latest versions of Qt.

    Using this technique, you can create your own JsonLoader object as follows:

    import QtQuick
import QtQuick.Controls
import QtQuick.Layouts
Page {
    id: page
    JsonLoader {
        id: jsonLoader
        source: "data.json"
    }
    ColumnLayout {
        spacing: 20
        Label { text: "pin" }
        Text
        {
            text: jsonLoader.jsonObject.truecurrent[5].pin // J1-26
        }
        Label { text: "json" }
        ListView {
            Layout.preferredHeight: contentHeight
            model: jsonLoader.jsonObject.truecurrent
            delegate: ItemDelegate {
text: `id: ${modelData.id} pin: ${modelData.pin}`
}
        }
    }
}

// JsonLoader.qml
import QtQuick
import QtQuick.Controls
Item { 
    property url source
    onSourceChanged: load(source)
    property string text
    property var jsonObject
    function load(url) {
        let xhr = new XMLHttpRequest();
        xhr.open("GET", url); 
        xhr.onreadystatechange = function() {
            if (xhr.readyState !== XMLHttpRequest.DONE) {
                return;
            }
            text = xhr.responseText;
            jsonObject = JSON.parse(xhr.responseText);
        }
        xhr.send();
    }
}

// data.json
{
    "pwm":
    [
        {"id": "1", "pin": "J2-21"},
        {"id": "2", "pin": "J2-22"},
        {"id": "3", "pin": "J2-23"},
        {"id": "4", "pin": "J2-24"},
        {"id": "5", "pin": "J2-25"},
        {"id": "6", "pin": "J2-26"}
    ],
    "truecurrent":
    [
        {"id": "1", "pin": "J1-21"},
        {"id": "2", "pin": "J1-22"},
        {"id": "3", "pin": "J1-23"},
        {"id": "4", "pin": "J1-24"},
        {"id": "5", "pin": "J1-25"},
        {"id": "6", "pin": "J1-26"}
    ]
}

    You can Try it Online!

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search