Question

I am playing around with the Windows 8 Metro SDK atm but ran in some trouble using WinJS.xhr.
If instead of returning the WinJS.xhr in the getData function i return some json object everything works fine, but i want to return an json object produced by a xhr request.

What is wrong in my attempt here? Thanks!! 🙂

(function () {
    "use strict";

function getData() {
    return WinJS.xhr({ url: "http://stackoverflow.com" }).done(
        function (request) {
            var results = [];
            var Item = {
                title: "title",
                text: "some text goes here"
            }
            results.push(Item);
            return results;
        },
        function (request) {
            var results = [];
            results.push({ title: "error", text: "error text" });
            return results;
        }
    );
}

var categoryList = new WinJS.Binding.List(getData());


var publicMembers = { itemList: categoryList };
WinJS.Namespace.define("Data", publicMembers);

})();

Answer 1

You won’t be able to get your getData function to return the data itself – this is the nature of asynchronous operations in Javascript and Metro.

The WinJS.xhr function returns a WinJS.Promise object, which represents an asynchronous operation. You should return this Promise to your caller, who can use the then or done methods to register callback functions that will be notified when the operation is complete (in the terminology of Promises, when the Promise is fulfilled).

So, your caller of the getData function would look something like this:

function myFunc() {
    getData().then(function(xhr) {
        // ...do something with the data when it arrives...
    }, function(err) {
        // ...do something with the error
    });
}

Notice that the callbacks are passed the XMLHttpRequest object.

And your getData method becomes something like this:

function getData() {
    return WinJS.xhr({ url: "http://stackoverflow.com" })
}