How to read raw data form DataSource?

[T.]

Hi,

I need to read the raw json data that was read by my datasource.
Here is my code:

$(document).ready(function ()

{          

  myDataSource = new kendo.data.DataSource(

  {

    transport:

    {

      read:

      {

        url: "./module/getData.php",

        type: "GET",

        dataType: "json",

      }

    },

 

    schema: {data: "data"}          

});

 

myDataSource.read();

 

alert(JSON.stringify(myDataSource.data()));

                    

$("#test").kendoGrid({

  dataSource: myDataSource

 });               

});

...
    <table id="test">
      <tr>
        <th data-field="text">Name</th>
        <th data-field="desc">Description</th>
      </tr>
    </table>
...

The table/grid shows the data correctly, but the JavaScript code

alert(JSON.stringify(myDataSource.data()));

shows just [], so it seems to be an empty array.

So how can I display the original, raw JSON data that comes from getData.php?
I also want to show the number of items, but

var data = myDataSource.data();
alert(data.length);

Just shows 0 (zero)

How the array can be empty and length can be zero but grid shows correct data?

By the way the JSON-data coming from getData.php looks like:

{"data":[
   {"text": "Item 1", "name": "Name1"},
   {"text": "Item 2", "name": "Name2"}
]}


Thanks a lot!

[Russ]

I have reproduced this same behavior.

I have a datasource with a transport which I can hook to a grid and get rows to display.  While trying to troubleshoot another issue (probably will be another forum post), I did the following with this datasource:

dataSourceXX.read();
var datapre = dataSourceXX.data();
var data = datapre.toJSON();
console.log("datapre v");
console.log(datapre);
console.log("data v");
console.log(data);

The results from the Chrome console log:

datapre v 
  [type: function, _events: Object, parent: function, init: function, toJSON: function…]
    _events: Object
    length: 0
    parent: function (){return t.parent()}
    type: function (e){var t,n,i=this,r=function(){return i};tt.fn.init.call(this);for(n in e)t=e[n],"_"!=n.charAt(0)&&(t=i.wrap(t,n,r)),i[n]=t;i.uid=et.guid()}
    __proto__: i
data v 
[] 

When hooked to the same datasource, the grid displays 5 rows.

$("#grid").kendoGrid({
   dataSource: dataSourceXX,
   ...

Thoughts?

[Nikolay Rusev]

Hello Russell,

We are not sure how to replicate this. Can you create a sample where this behavior can be observed?

Regards,
Nikolay Rusev
Telerik

[Russ]

Perhaps, but I'll have to find a public data feed and create a reproducer from that feed since you wouldn't be able to consume the current one.

[Shawn]

I have been trying to read the data from a DataSource programmatically in order to transform it into a different structure for my MVVM view-model.

The dataSource reads the data from the JSON webservice just fine (I can see it in firebug response and if I set a schema function)

I was unable to read the data using data().  Using data() I would get an object with about 4 fields one of which is length and it was undefined.

I tried using change: with this.data() and it was the same.

I did find a way to get the data I want.

            requestEnd: function (e) {
                view_model.set('items', processResponse(e.response));
            }

Here is the whole function:
    function getDetails(id) {
        var details_ds = new kendo.data.DataSource({
            transport: {
                read: {
                    url: '<%= APIBaseAddress %>' + 'Detail',
                    dataType: 'json',
                    type: 'GET',
                    data: { Id: id }
                }
            },
            requestEnd: function (e) {
                view_model.set('items', processResponse(e.response));
            }
        });

        details_ds.read();
    }


I am wondering if this is an acceptable way of doing it and why data() does not work.

Thanks,

Shawn

[gregory]

I am having the same problems. Here is the code and the result:

//Static datasources. These are needed for the dropdowns within a grid. Putting the dropdown data in a datasource declaration is not sufficient as it loads the data from the server on every click making the dropdowns within a grid very slow.
buyers = new kendo.data.DataSource({data:[{"buyerid":31,"buyerprefix":"AM"},{"buyerid":18,"buyerprefix":"AR"},{"buyerid":49,"buyerprefix":"BH"},{"buyerid":50,"buyerprefix":"BH"},{"buyerid":17,"buyerprefix":"CL"},{"buyerid":42,"buyerprefix":"CO"},{"buyerid":30,"buyerprefix":"CS"},{"buyerid":3,"buyerprefix":"CV"},{"buyerid":2,"buyerprefix":"DK"},{"buyerid":1,"buyerprefix":"EB"},{"buyerid":52,"buyerprefix":"EJO"},{"buyerid":12,"buyerprefix":"ES"},{"buyerid":26,"buyerprefix":"EW"},{"buyerid":4,"buyerprefix":"FY"},{"buyerid":25,"buyerprefix":"GA"},{"buyerid":5,"buyerprefix":"JA"},{"buyerid":44,"buyerprefix":"JT"},{"buyerid":15,"buyerprefix":"KG"},{"buyerid":16,"buyerprefix":"KK"},{"buyerid":6,"buyerprefix":"KM"},{"buyerid":43,"buyerprefix":"KS"},{"buyerid":45,"buyerprefix":"LD"},{"buyerid":7,"buyerprefix":"LG"},{"buyerid":8,"buyerprefix":"LP"},{"buyerid":22,"buyerprefix":"MB"},{"buyerid":14,"buyerprefix":"MH"},{"buyerid":33,"buyerprefix":"ML"},{"buyerid":9,"buyerprefix":"SD"},{"buyerid":10,"buyerprefix":"SKB"},{"buyerid":21,"buyerprefix":"SR"},{"buyerid":47,"buyerprefix":"SVM"},{"buyerid":48,"buyerprefix":"SVM"},{"buyerid":46,"buyerprefix":"SW"},{"buyerid":11,"buyerprefix":"TH"},{"buyerid":51,"buyerprefix":"TJ"},{"buyerid":13,"buyerprefix":"VL"}]
});

var data = buyers.data();
alert(data['data:']);

It returns 0. Is this due to the data handle in the static datasource? I have tried everything (for 16 hours now) and I can't seem to iterate over the datasource successfully.

[gregory]

The last line is an error- it should be alert(data.length);

[gregory]

The only way that I found to achieve looping thru a datasource that contains the data handle (like my ds above) is:

function getBuyerPrefixForDropdown(buyerid){
 // Set global variables that are accessible to both outer and inner functions.
 var buyerPrefix = '';
 // Loop thru the Kendo datasource using the javascript 'promise' based Kendo 'datasource.fetch' function.
 var dsFetch = buyerDs.fetch(function(){
  var data = buyerDs.data();
  for(var i=0, length=data.length; i<length; i++){
   if (data[i].buyerid === buyerid) {
    // Set the global labelValue var in order to return it properly to the outer function. This should either be null or the proper value.
    buyerPrefix = data[i].buyerprefix;
   }//if --->
  }//for
 });//buyers.fetch
 return buyerPrefix;
}//function

[Nikolay Rusev]

Hello Timon,

DataSource.data method will returns an ObservableArray which wraps all the items currently in the DataSource and respectively returned from the server.

That ObservableArray acts as a real JavaScript array. You can find the number of items in it: length property and you can "unwrap"  the data to its original state by calling toJSON method.

Regards,
Nikolay Rusev
the Telerik team

[T.]

Hi Nikolay,

thanks for reply. But for some reason the ObservableArray is empty, this is my problem!
As I wrote in my 1st post:

alert(JSON.stringify(myDataSource.data()));

shows just [], so it seems to be an empty array.

So how can I display the original, raw JSON data that comes from getData.php?
I also want to show the number of items, but

var data = m yDataSource.data();
alert(data.length);

Just shows 0 (zero)

Again, the table shoss the items correctly, but the returned ObservableArray (myDataSource.data()) seems to be empty!?!

Thanks fro further help!

[Nikolay Rusev]

Hello Timon,

There is no chance of having Grid to display data and at the same time DataSource.data() to be empty.
The Grid widget heavily relies on DataSource's data in order to populate.

You can test this against any of the Grid demos: http://demos.kendoui.com/web/grid/index.html

Also make sure that there isn't any JavaScript errors on the page.

Regards,
Nikolay Rusev
the Telerik team

[Alexander Valchev]

Hello guys,

@Russell

I believe that the problem is caused by timing issues. DataSource uses asynchronous Ajax request to retrieve the data from the server.

dataSourceXX.read();
dataSourceXX.data();

Most probably at the time when data() method is executed, the data is not yet retrieved from the server.

Please hook up to the change event the dataSource which will fire after data Ajax request finishes successfully.

dataSourceXX.read();
dataSourceXX.one("change", function() { this.data(); });

I hope this will help.

Regards,
Alexander Valchev
Telerik

[Nikolay Rusev]

Hello Shawn,

There is nothing wrong in your approach as long as it serves the needs of your scenario. 
DataSource.data() however should be properly populated and it will container an array with all data items returned from server.

Regards,
Nikolay Rusev
Telerik

[Nikolay Rusev]

Hello Gregory,

When you initialize a DataSource you must first call read in order to actually process the initial data then then read it through data method.

In the matter of fact you should always treat DataSource operations as asynchronous and should listen for change event in order to have access to latest data read.

http://dojo.telerik.com/@rusev/IQetA

Regards,
Nikolay Rusev
Telerik