DevExtreme使用敲除将JSON作为数据源加载 [英] DevExtreme load JSON as datasource using knockout

问题描述

我对javascript和devextreme还是陌生的，目前正在寻找解决方法.我创建了一个加载json文件的网页，效果很好，但是我无法使用devextreme完成它.

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.

我有一个要包含数据的dxDataGrid.使用.js文件，该数据也可以正确显示.我的json文件是这样的:

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": "[e-mail]",
    "address": "examplestreet 0",
    "zip": "12345",
    "city": "examplecity",
    "country": "examplecountry",
    "dayOfBirth": "1990/01/01"
  },
  {
    "id": 1,
    "name": "user1",
    "mail": "[e-mail]",
    "address": "examplestreet 1",
    "zip": "23456",
    "city": "examplecity",
    "country": "examplecountry",
    "dayOfBirth": "1990/01/01"
  },
  {      
    "id": 2,
    "name": "user2",
    "mail": "[e-mail]",
    "address": "examplestreet 2",
    "zip": "34567",
    "city": "examplecity",
    "country": "examplecountry",
    "dayOfBirth": "1990/01/01"
  }
 ]
}

在Google chromes开发人员工具下，我尝试使用以下代码加载json文件，该对象已正确显示，但是由于这是我的新手，所以我无法弄清为什么未将其加载到dxDataGrid中

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;

感谢您的任何建议！

json文件正在工作，我可以举个例子

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

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

，我将收到带有"user0"文本的警报.但是我如何才能在dataGrid中实现此功能呢?

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();
};

ViewModel()保持原样.现在，我得到控制台输出:

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

尽管dataGrid仍然为空.

The dataGrid is still empty though.

推荐答案

" getData()"方法应返回一个近似值，以便与dxDataGrid一起使用. 大概是这样的:

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与JQuery Promise一起使用.我不确定其他的Promise库.

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

您似乎获得了数组数组.在这种情况下，您只需要考虑第一个元素:

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

这篇关于DevExtreme使用敲除将JSON作为数据源加载的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！