How to populate list in windows8 with javascript

Question

Im trying to build an windows8 app, i use the SplitApp as basic. Just trying to add data from AJAX but it fails.

In the file data.js i have:

(function () {

    var list = new WinJS.Binding.List();

    $.each(data(), function (key, item) {
        list.push(item);
    }); 

}
})();

In the file app.js i have (This works and populates the list in the app)

function data() {

   var testGroupMeeting = [];
   var testMeeting = [];

   testGroupMeeting.push(new Group({ id: "1", title: "Group1" }));

   testMeeting.push(new Meeting({ group: testGroupMeeting[0], title: "Item Title: 1"       }));

   return testMeeting;


}

But when i want to use AJAX to get data and return testMeeting when it is populated it crashes.

In the file app.js i have (Doesnt work) but i need to get this to work

function data() {

   var testGroupMeeting = [];
   var testMeeting = [];

$.ajax({
    url: "/json/json.php",
    dataType: 'json',
    contentType: 'text/json',
    type: 'GET',
    success: function (data) {

           //Data here is correct and mapped to the arrays, its the same as in the abow example, i have the same data in the arrays as in the above example



        }
        return testMeeting;
    }

});


}

But the problem seems to be that AJAX is not supposed to be returning anything. And i cant do a callback to data.js because that function is anonymous as you can see.

How would you do this?

phtrivier · Accepted Answer · 2013-02-22 14:47:49Z

0

This can not work this way, because the $.ajax function is asynchronous : it does the ajax call, and then, later, calls the "success" function with the appropriate data.

You'll have rewrite the $.each(data() ... so that instead of calling data() and expecting it to return testMeeting , you call data and expect it to call a callback with the testMetting object.

Something like :

(function () {

    var list = new WinJS.Binding.List();

    getData(function (theMetting) {


        $.each(theMeeting, function (key, item) {
          list.push(item);
        }); 

 }
})();


// callback is a function that will be called with 
// something that is built from the server, after the ajax
// request is done
function getData(callback) {


 $.ajax({
    // ... everything you did ... 
    success: function (data) {

       // ... use the data to build the meeting object
       // and pass it to the callback
       callback(meeting)


    }
    return testMeeting;
}

});

}

There is a fundamental difference between synchronous code (that returns functions) and asynchonous calls (that does some work, and later calls callback with the result). $.ajax is the typicall asynchronous function.

You could in theory pass the "async" flag to ajax, so that the $.ajax function does not return before the Ajax call is done, but you probably do not want to do that since it would block you UI.

Hoping this helps.

answered Feb 22, 2013 at 14:47

phtrivier

13.5k9 gold badges54 silver badges82 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

rubin Over a year ago

The problem is that the getData(function (theMetting) { $.each(theMeeting, function (key, item) { list.push(item); }); } is in anonymous function by default from microsoft, and i cant access it from my app.js as you suggested, or?

phtrivier Over a year ago

No, the getData is just the function that you could write instead of the "data" function. I assumed that all code was yours - If you can not change the function from data.js, and the only way you can modify the application is by defining the "data" function, then you will have to make a synchronous (not asynchronous) call to your server - you can do it by passing a flag to the $.ajax function. Then, the $.ajax function will wait until the "success" callback has been done...

phtrivier Over a year ago

Now, to be clear, I don't really understand what you mean by "in a anomymous function by default from ms". All I can tell you is that the $.each(data(), .... ) version will only work if data() returns an Array, and you will not be able to write a function that returns data from an asynchronous call to the server. Either you make it a synchronous call, or you rewrite the loop to adapt it. Hoping this helps.

Collectives™ on Stack Overflow

How to populate list in windows8 with javascript

1 Answer 1

3 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related