JSON parsing issues in Kendo DataSource

[Andrew]

I am trying to use Kendo/Icenium to develop an app that talks to one or more existing Web backends, and am finding the Kendo DataSource to be brittle/buggy.  I am using the Icenium Kendo Project boilerplate, making minor modifications to the weather.json file to reproduce more complex issues I have found.

1. kendo.data.DataSource can only be used for JSON results that are of type array.  If the target service returns a single dictionary with embedded results, DataSource can't be made to deal with it.  Perhaps there is a workaround?  This can be reproduced by enclosing the array in weather.json in a dictionary that sets the array as its "results:" key, as in: { "results": [ ... ] }.  How do you display this?
2. kendo/Icenium fails to log anything to the console if the returned JSON document is invalid.  Simply insert an extra comma or remove an existing comma anywhere in the document.  The spinner will spin forever and there is no feedback to the console.
3. The JSON parsing fails even on a perfectly legal JSON document if one of the array items contains a nested dictionary with a parent key.  For example (again, slight mod to weather.json):
{
"day": "Monday",
"highTemperature": 28,
"lowTemperature": 14,
"image": "shower",
 "nested" : { "parent" : 0 }
}
This results in an exception from kendo.mobile.min.js:
Uncaught TypeError: Property 'parent' of object [object Object] is not a function

These issues are unfortunately making it difficult to get off the ground.  Any workarounds are appreciated.

[Alexander Valchev]

Hi Andrew,

Straight to your questions:

1. In order to load this data structure you should configure the schema.data property of the dataSource:

• http://docs.kendoui.com/api/framework/datasource#configuration-schema.data
  
  

2. Loading animation is shown on requestStart and hidden on requestEnd event of the DataSource. RequestEnd will not be fired if the retrieved data is invalid hence the application will continue to display the loading animation. The developer should hook up to the error event of the DataSource and handle errors manually. If you would like to hide the animation this could be through the hideLoading method of the application:

• http://docs.kendoui.com/api/mobile/application#methods-hideLoading
  
  

3. "parent" is reserved field in kendo.data.ObservableObject (after parsing data items are transformed in observableObjects).

• http://docs.kendoui.com/api/framework/observableobject#methods-parent
  
  

Using another name for the parameter will fix the issue. For example:

{
"day": "Monday",
"highTemperature": 28,
"lowTemperature": 14,
"image": "shower",
"nested" : { "parent1" : 0 }
}

On a side note the DataSource is not designed to work with nested data structures. Although that it is possible to parse and load the "nested" object some functionality such as filtering might not work.

I hope this information will help.

Regards,
Alexander Valchev
Telerik

[Andrew]

Thanks for the thorough answers, Alexander!

The answer to #3 is a disappointment.  In this case I'm using the WordPress REST JSON API:
http://wordpress.org/plugins/json-rest-api/
and it inserts a "parent" field at multiple levels in the JSON.  So it sounds like Kendo cannot be used to create apps for this particular REST API.

Is there a hook that would allow the JSON to be pre-processed to remove/rename any "parent" keys before the observable is created?

[Andrew]

Ahh--studied further in the docs, thanks for the pointer.  I need to replace the "read" dictionary in the data source definition with a function that does the same.  This also allows me to put a hook for parser error.

                    read: function(options) {
                        console.log("Requesting posts");
                      // make JSONP request to http://demos.kendoui.com/service/products
                      $.ajax({
                          
                        url: "http://gear11.com/wp-json.php/posts",
                        dataType: "json", 
                        success: function(result) {
                          console.log("Success response");
                          console.log(result);
                          // notify the data source that the request succeeded
                          data = utils.filter(['parent'], result);
                          options.success(data);
                        },
                        error: function(result, e) {
                          console.log("Error response: ");
                          console.log(e);
                          // notify the data source that the request failed
                          options.error(result);
                        }
                      });
                    }