DevExtreme load JSON as datasource using knockout

问题

I'm new to both javascript and devextreme and currently finding my way through. I created a webpage which loads a json-file, which worked well, but I can't get it done using devextreme.

I have a dxDataGrid which I want to contain the data. Using a .js-file, that data is also displayed correct. My json-file is this:

{
  "user": [
  {
    "id": 0,
    "name": "user0",
    "mail": "user0@example.com",
    "address": "examplestreet 0",
    "zip": "12345",
    "city": "examplecity",
    "country": "examplecountry",
    "dayOfBirth": "1990/01/01"
  },
  {
    "id": 1,
    "name": "user1",
    "mail": "user1@example.com",
    "address": "examplestreet 1",
    "zip": "23456",
    "city": "examplecity",
    "country": "examplecountry",
    "dayOfBirth": "1990/01/01"
  },
  {      
    "id": 2,
    "name": "user2",
    "mail": "user2@example.com",
    "address": "examplestreet 2",
    "zip": "34567",
    "city": "examplecity",
    "country": "examplecountry",
    "dayOfBirth": "1990/01/01"
  }
 ]
}

I tried to load the json-file with the following code, under google chromes developer tools, the object is correctly displayed, but since I am new to this, I can't figure out why it is not loaded into the dxDataGrid.

var getData = function () {
    var xmlhttp = new XMLHttpRequest(),
                        json;
    xmlhttp.onreadystatechange = function() {
        if(xmlhttp.readyState === 4 && xmlhttp.status === 200) {
            json = JSON.parse(xmlhttp.responseText);
            console.log(json);
            return json;
        }
    };              

    xmlhttp.open('GET', 'data.json', true);
    xmlhttp.send();


};

var customersViewModel = {
    dataGridOptions: {
        dataSource: getData(),

        editing: {
            allowUpdating: true,
            allowAdding: true,
            mode: "form", 

            form: {
                items: [{
                    itemType: 'group',
                    caption: 'Basisinformationen',
                    items: ['user.name', 'user.mail', {
                        dataField: 'dayOfBirth',
                        editorOptions: {
                            min: new Date(1960,0,1),
                            max: new Date(2010,11,31)
                        }
                    }]
                },
                {
                    itemType: 'group',
                    caption: 'Kontakt',
                    items: ['user.address', 'user.zip', 'user.city', 'user.country']
                }]
            }

        },

        columns: [{
                dataField: 'name',
                caption: 'Name',
                validationRules: [{type: 'required'}]
            }, {
                dataField: 'mail',
                caption: 'E-Mail'
            }, {
                dataField: 'address',
                caption: 'Address'
            }, {
                dataField: 'zip',
                caption: 'Zip-Code'
            }, {
                dataField: 'city',
                caption: 'City'
            }, {
                dataField: 'country',
                caption: 'Country'
            }, {
                dataField: 'dayOfBirth',
                caption: 'Birthdate',
                dataType: 'date',
                format: "dd.MM.yyyy"
            }]
    }
};
return customersViewModel;

Thanks for any advice!

Edit: The json-file is working, I can call for example

alert(json.user[0].name);

and I will get an alert with the text "user0". But how can I implement this functionality into the dataGrid?

Edit 2: I edited my code and came to the following: this code was changed:

var getData = function () {
    var deferred = $.Deferred();
    var xmlhttp = new XMLHttpRequest(),
                        json;
    xmlhttp.onreadystatechange = function () {
        if (xmlhttp.readyState === 4 && xmlhttp.status === 200) {
            json = JSON.parse(xmlhttp.responseText);
            json = Object.keys(json).map(function (k) { return json[k] });
            console.log(json);
            deferred.resolve(json); // json should be array here
        }
    };

    xmlhttp.open('GET', 'data.json', true);
    xmlhttp.send();

    return deferred.promise();
};

The ViewModel() was left as it was. Now, I get the console output:

The dataGrid is still empty though.

回答1:

The "getData()" method should return a proimise in order to work with dxDataGrid. Probably something like this:

var getData = function () {
    var deferred = $.Deferred();
    var xmlhttp = new XMLHttpRequest(),
                        json;
    xmlhttp.onreadystatechange = function() {
        if(xmlhttp.readyState === 4 && xmlhttp.status === 200) {
            json = JSON.parse(xmlhttp.responseText);
            console.log(json);
            //return json;
            deferred.resolve(json); // json should be array here
        }
    };              

    xmlhttp.open('GET', 'data.json', true);
    xmlhttp.send();

    return deferred.promise();
};

DevExtreme works with JQuery promise. I'm not sure about other promise libraries.

Update 1

It looks like you get array of arrays. In this case you need just take first element:

deferred.resolve(json[0]); // json should be array here

来源：https://stackoverflow.com/questions/39659637/devextreme-load-json-as-datasource-using-knockout