QML ListModel unable to update

Question

I've just started working on QML and it looks promising because I really like C. While experimenting, I came to a point where I had to update a ListModel from a PHP service using an Ajax request. I referred to this link, but I can't seem to make it work. My code follows.

try.js:

function load() {
    listModel.clear();
    var xhr = new XMLHttpRequest();
    xhr.open("GET", "http://<url>/service_newsletter.php?method=news", true);
    xhr.onreadystatechange = function() {
        if(xhr.readyState == xhr.DONE){
            if(xhr.status == 200) {
                var jsonData = JSON.parse(xhr.responseText);
                for(var index in jsonData.data.posts) {
                    listModel.append({
                        "text": jsonData.data.posts[index].text,
                        "description": jsonData.data.posts[index].description});
                    alert(jsonData.data.posts[index].text);
                }
            }
        }
    }
    xhr.send();
}

QML Code:

import QtQuick 1.1
import "try.js" as JS

Item {
    id:root
    width: 360
    height: 640

    Component.onCompleted: JS.load()

    ListModel {
        id:listModel
    }

    ListView {
        id:view
        anchors.fill:parent
        model : listModel
        delegate: Rectangle {
             width:parent.width
             height:80
             Text {
                anchors.centerIn:parent
                text: text
             }
        }
    }
}

NOTE: using Necessitas to deploy Qt apps on Android!

NOTE 2: the format of the JSON data from my server is similar to the one given in the example link above.

Kakadu Kakadu · Accepted Answer · 2014-01-14T08:01:32

I have almost succeeded. The only problem is if about model has already 1 element, when we'll do append it will have 2 elements, but only 1st will be redrawn. Probably I miss something in documentation.

Ninja, I can recommend you to avoid naming roles the same way as delegate properties are named because maybe text: text will work but in text: "a"+text the 2nd text will be referenced to 1st text when you are expecting a reference to model's role name.

So, better code is

main.qml

import QtQuick 2.1
import "try.js" as JS

Rectangle {
    id:root
    width: 640 
    height: 480

    ListModel {
        id:listModel
        ListElement { title: "a" }
    }

    ListView {
        id:view
        width: 600
        height: 500
        model : listModel
        orientation: ListView.Vertical

        delegate: Rectangle {
             width: 100
             height: 20
             color: "yellow"
             Text {
                text: title
                color: "black"
             }
             Component.onCompleted: console.log("rectangle created ", title, index);
        }
    }
    Component.onCompleted: JS.load()
}

try.js

function load() {
    listModel.clear();
    var xhr = new XMLHttpRequest();
    xhr.open("GET", "http://echo.jsontest.com/key/value/otherkey/othervalue", true);
    xhr.onreadystatechange = function() {
        if(xhr.readyState == xhr.DONE) {
            if(xhr.status == 200) {
                var jsonData = JSON.parse(xhr.responseText);
                console.log(listModel);
                listModel.append({
                        "title": "text1",
                        "description": "desc1"
                });
                console.log("ANswer gotten", jsonData);
            }
        }
    }
    xhr.send();
}

QML ListModel unable to update

1 Answers