How to read raw data form DataSource?

14 posts, 0 answers
  1. T.
    T. avatar
    25 posts
    Member since:
    Aug 2012

    Posted 12 Feb 2013 Link to this post

    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!
  2. Nikolay Rusev
    Admin
    Nikolay Rusev avatar
    2284 posts

    Posted 13 Feb 2013 Link to this post

    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
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
  3. Kendo UI is VS 2017 Ready
  4. T.
    T. avatar
    25 posts
    Member since:
    Aug 2012

    Posted 13 Feb 2013 Link to this post

    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!
  5. Nikolay Rusev
    Admin
    Nikolay Rusev avatar
    2284 posts

    Posted 13 Feb 2013 Link to this post

    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
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
  6. Russ
    Russ avatar
    10 posts
    Member since:
    May 2012

    Posted 26 Jun 2013 Link to this post

    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?
  7. Nikolay Rusev
    Admin
    Nikolay Rusev avatar
    2284 posts

    Posted 27 Jun 2013 Link to this post

    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
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
  8. Russ
    Russ avatar
    10 posts
    Member since:
    May 2012

    Posted 27 Jun 2013 Link to this post

    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.

  9. Alexander Valchev
    Admin
    Alexander Valchev avatar
    2875 posts

    Posted 01 Jul 2013 Link to this post

    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
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
  10. Shawn
    Shawn avatar
    2 posts
    Member since:
    Jul 2013

    Posted 15 Oct 2013 Link to this post

    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
  11. Nikolay Rusev
    Admin
    Nikolay Rusev avatar
    2284 posts

    Posted 17 Oct 2013 Link to this post

    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
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
  12. gregory
    gregory avatar
    6 posts
    Member since:
    Jun 2006

    Posted 23 Jun in reply to Nikolay Rusev Link to this post

    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.

  13. gregory
    gregory avatar
    6 posts
    Member since:
    Jun 2006

    Posted 23 Jun in reply to gregory Link to this post

    The last line is an error- it should be alert(data.length);
  14. gregory
    gregory avatar
    6 posts
    Member since:
    Jun 2006

    Posted 25 Jun in reply to gregory Link to this post

    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

  15. Nikolay Rusev
    Admin
    Nikolay Rusev avatar
    2284 posts

    Posted 27 Jun Link to this post

    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
     
    Get started with Kendo UI in days. Online training courses help you quickly implement components into your apps.
     
Back to Top
Kendo UI is VS 2017 Ready