Home / ubuntu / Questions / 544842
Accepted
lumenwrites
Asked: 2014-11-03 12:44:19 +0800 CST

How to get data from REST API with QML (for ubuntu touch app)?

  • 772

I am trying to use firebase REST API and to get some data into my ubuntu touch app. Can you give me some pointers on how could I go about doing that?

application-development

1 Answers

  1. Best Answer

    You can do it using some Javascript code in QML:

    import QtQuick 2.0
import Ubuntu.Components 0.1

Item {
    width: 200
    height: 150

    ListModel {
        id: model
    }

    ListView {
        id: listview
        anchors.fill: parent
        model: model
        delegate: Text {
            text: jsondata
        }
    }

    function getData() {
        var xmlhttp = new XMLHttpRequest();
        var url = "https://samplechat.firebaseio-demo.com/users/jack/name.json";

        xmlhttp.onreadystatechange=function() {
            if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
                myFunction(xmlhttp.responseText);
            }
        }
        xmlhttp.open("GET", url, true);
        xmlhttp.send();
    }

    function myFunction(json) {
        var obj = JSON.parse(json);
        listview.model.append( {jsondata: obj.first +" "+ obj.last })
    }

    Button {
        anchors.bottom: parent.bottom
        width: parent.width
        text: "GET Data"
        onClicked: getData()
    }
}

    Run the following code with qmlscene:

    enter image description here

    After clicking to get data from Firebase:

    enter image description here

    To run the above code make sure to populate the database as follow:

    curl -X PUT -d '{ "first": "Jack", "last": "Sparrow" }' \
https://samplechat.firebaseio-demo.com/users/jack/name.json

    Source

    • 7