DevExtreme - Trying to assign array to dxList from SQL

Question

I'm trying to create a dxList with all the "users" in my SQL database. Please refer to code below.

MobileApplication.User = function (params) {

    var baseAddress = 'http://localhost:8733/Design_Time_Addresses/TestService/Service/';
    var users = [];

    function getUsers() {
    $.getJSON(baseAddress + 'users?callback=?',
        function (json) {
            //This return a valid Json string, and the variable "json" is basically the array.
            users = json;
        });
    }

    getUsers();
    console.log("USERS ARRAY: ");
    console.log(users);

    var viewModel = {
        listItems: users
    };

    return viewModel;
};

The param json return a valid json array (If I were to call the console.log(json) it would return an array in the browser console.

I'm trying to assign this array to the users array, but the console.log("USERS ARRAY: ") and console.log(users) returns an empty array.

How come it returns an empty array? Does the users[] not get assigned to the array built from the json?

Besides that, I'm new to DevExtreme and I'm trying to apply this array to a dxList. Refer to below.

<div data-options="dxView : { name: 'User', title: 'User' } ">
    <div class="home-view" data-options="dxContent : { targetPlaceholder: 'content' } ">
        <div data-bind="dxList: { items: listItems }">
            <div data-options="dxTemplate: { name: 'item' } ">
                <div data-bind="text: Name"></div>
            </div>
        </div>
    </div>
</div>

Am I doing the correct thing here? Everywhere I read about the dxList, they're either using local data (textfile or a simple array), and I'm not sure how to make this happen?

Answer 1

The $.getJSON function works asynchronously, therefore console.log(users); shows nothing.

In your case, I suggest you use ko.observableArray to save loaded users.

var users = ko.observableArray([]);

function getUsers() {
    $.getJSON(baseAddress + 'users?callback=?',
        function (json) {
        //This return a valid Json string, and the variable "json" is basically the array.
        users(JSON.parse(json));
    });
}

getUsers();

var viewModel = {
    listItems: users
};

This sample shows this approach in action.

Also, you can use the custom store object to work with remote data. See this sample - http://jsfiddle.net/sergfry/dssa338u/1/