title: DevExtreme load JSON as datasource using knockout
body: <p>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.</p>
  
  <p>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:</p>
  
  <pre><code>{
    "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"
    }
   ]
  }
  </code></pre>
  
  <p>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.</p>
  
  <pre><code>var getData = function () {
      var xmlhttp = new XMLHttpRequest(),
                          json;
      xmlhttp.onreadystatechange = function() {
          if(xmlhttp.readyState === 4 &amp;&amp; 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;
  </code></pre>
  
  <p>Thanks for any advice!</p>
  
  <p>Edit: The json-file is working, I can call for example </p>
  
  <pre><code>alert(json.user[0].name);
  </code></pre>
  
  <p>and I will get an alert with the text "user0". But how can I implement this functionality into the dataGrid?</p>
  
  <p>Edit 2: I edited my code and came to the following: this code was changed:</p>
  
  <pre><code>var getData = function () {
      var deferred = $.Deferred();
      var xmlhttp = new XMLHttpRequest(),
                          json;
      xmlhttp.onreadystatechange = function () {
          if (xmlhttp.readyState === 4 &amp;&amp; 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();
  };
  </code></pre>
  
  <p>The ViewModel() was left as it was. Now, I get the console output:
  <a href="https://i.stack.imgur.com/1iTtF.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/1iTtF.png" alt="Console Output"></a></p>
  
  <p>The dataGrid is still empty though.</p>