Simple HTTP JSON Request in QML

httpQmlJson.qml

import bb.cascades 1.0

Page {
    content: Container {
        Label {
            id: emailLabel
            text: qsTr("Email")
        }
        Label {
            id: urlLabel
            text: qsTr("URL")
        }
        Label {
           id: sinceLabel
           text: qsTr("Since")
        }
        Label {
           id: bioLabel
           text: qsTr("Bio")
        }
        Button {
            id: requestButton
            text: "World Domination"
            onClicked: {

                request('http://someurlgoeshere.com', function (o) {
                        
                        // log the json response
                        console.log(o.responseText);
                        
                        // translate response into object
                        var d = eval('new Object(' + o.responseText + ')');

                        // access elements inside json object with dot notation
                        emailLabel.text = d.email
                        urlLabel.text = d.url
                        sinceLabel.text = d.since
                        bioLabel.text = d.bio
                         
                    });
            }
        }
    }
    // this function is included locally, but you can also include separately via a header definition
    function request(url, callback) {
        var xhr = new XMLHttpRequest();
        xhr.onreadystatechange = (function(myxhr) {
            return function() {
                callback(myxhr);
            }
        })(xhr);
        xhr.open('GET', url, true);
        xhr.send('');
    }
}

jsonSampleResponseStructure.json

{
  "email": "[email protected]",
  "url": "http://www.microsoft.com",
  "since": "2011-09-08T08:06:48Z",
  "bio": "I am awesome"
}

Cheers! Though you might want to alter it with the following:

return function() {
    if(myxhr.readyState === 4) callback(myxhr)
}

To prevent the callback being fired multiple times without response text.

You're awesome !

Awesome!

Cheers! Though you might want to alter it with the following:

return function() {
    if(myxhr.readyState === 4) callback(myxhr)
}

To prevent the callback being fired multiple times without response text.

Thanks to you too!, 5 years later, your info is still useful! :)