WinJS - Unable to get property 'forEach' of undefined or null reference

Question

I'm working on my 1st WinJS app for Windows 8 and I'm just trying to replace the base code given in 2 grid template and I'm getting this error:

Unable to get property 'forEach' of undefined or null reference

My code:

getData().forEach(function (item) {
    list.push(item);
});

The initial function:

function getData() {

    // JSON request
    WinJS.xhr({
        type: "GET",
        url: "http://mytld.com/mobile/pagethatreturnsjsondata.php"
    }).then(
            function (response) {
                OnSuccessCall(response);
            },
            function (error) {
                var err = error;
                console.log("Error : " + err.message);
            },
            function (progress) { }
    );
}

The following is getting the data from a php webservice which is returning JSON data:

function OnSuccessCall(response) {
    var itemContent = "<p>Item Content</p>";
    var itemDescription = "Item Description";
    var groupDescription = "Group Description";

    // These three strings encode placeholder images. You will want to set the
    // backgroundImage property in your real data to be URLs to images.
    var darkGray = "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXY3B0cPoPAANMAcOba1BlAAAAAElFTkSuQmCC";
    var lightGray = "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXY7h4+cp/AAhpA3h+ANDKAAAAAElFTkSuQmCC";
    var mediumGray = "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXY5g8dcZ/AAY/AsAlWFQ+AAAAAElFTkSuQmCC";

    // Each of these sample groups must have a unique key to be displayed separately.
    var sampleGroups = [
        { key: "group1", title: "prayers", subtitle: "submitted prayers", backgroundImage: darkGray, description: groupDescription }
    ];

    var x = response.responseText.length;
    var json = JSON.parse(response.responseText);
    var sampleItems = [];
    for (var i = 0; i < json.length - 1; i++) {
        sampleItems.push({
            group: sampleGroups[0],
            title: json[i].text,
            subtitle: "Item Subtitle: 1",
            description: itemDescription,
            content: itemContent,
            backgroundImage: lightGray
        });
    }

    return sampleItems;
}

I'm able to see data in sampleItems:

I'm obviously doing something wrong, as when I compare my object results with the results from the original example data they are virtually the same.

Any help is appreciated.

Answer 1

Your getData() function does not have a return statement, so it returns undefined. And you cannot forEach on undefined.

Looking at the bigger picture: Your getData() uses xhr, so it does not actually return the results, Instead, it gets the data asynchronously. You therefore cannot forEach the return value because the results don't exist yet. You have to wait for the promise to complete, and then you can call forEach on the promise result.

function getData() {
    // add "return" here so the function returns a Promise
    return WinJS.xhr({
        type: "GET",
        url: "http://mytld.com/mobile/pagethatreturnsjsondata.php"
    }).then(
            function (response) {
                // add "return" here to specify the promise's completed value
                return OnSuccessCall(response);
            },
            function (error) {
                var err = error;
                console.log("Error : " + err.message);
            },
            function (progress) { }
    );
}

Now that getData() returns something (a Promise) you can schedule work to occur when the promise completes.

getData().then(function(results) { results.forEach(...) });