Can I use JavaScript to get JSON data from the ser

Question

I need to get JSON data and load it to a table. As I guess I need some C++ skills for it. But can I do this in plain JavaScript or may be QML?

Answer 1

If you add the pure-QML JSONListModel to your project, you can use the full power of the View-Model pattern. However, it doesn't support presenting the data before it is fully downloaded.

Answer 2

You can do that easily in C++ as Qt5 has native support for JSON. Check the following answer for the example:

How to create/read/write JSon files in Qt5

Answer 3

Yes, you can do it purely using javascript API's in QML. Following code works on Qt 5.3.1

import QtQuick 2.0
import QtQuick.Controls 1.2

Item {
    width: 300
    height: 400

    ListModel {
        id: model
    }

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

    function getData() {
        var xmlhttp = new XMLHttpRequest();
        var url = "http://www.w3schools.com/website/Customers_MYSQL.php";

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

    function myFunction(response) {
        var arr = JSON.parse(response);
        for(var i = 0; i < arr.length; i++) {
            listview.model.append( {listdata: arr[i].Name +" "+ arr[i].City +" "+ arr[i].Country })
        }
    }

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