Connecting DataManager to API that returns JSON

[Adam Zawierucha]

I am wanting to connect a datamanger to a API that returns a reponse in the following format:

{

"success": true,

"content": {

"recordsets": [

[

{

"ID": ....,

"SummaryID": ...,

"StatusName": "....",

"StatusDate": "....",

"StatusSource": null,

"StatusDetails": null

},

{

"ID": ...,

"SummaryID": ....,

"StatusName": "..,

"StatusDate": ...",

"StatusSource": null,

"StatusDetails": null

},

...

Where each object in the "recordsets" array should be a row (in whatever). I am struggling to get the DataManager to proerly connect to this JSON output muchless the sub-array "recordsets"

Any sample / way to approach this seamlessly?

My overarching goal is to connect to a variety of endpoints that return data this way and use it to do a variety of things (make pie charts, populate grids, make line charts,e etc.)

[Shalini Maragathavel]

Hi Adam, 

Greetings from Syncfusion support. 

Based on your requirement we suspect that you need to connect the API data with the grid. To achieve your requirement we suggest you to use WebAPI Adaptor to bind grid with Web API created using OData endpoint. 

 

For more information please refer the below help document, 

 

https://ej2.syncfusion.com/javascript/documentation/grid/data-binding/#web-api 

We also suggest you to use custom binding approach to bind data in the Grid. Using custom binding approach you can bind data from API call by providing your own custom queries(as required by your API) and handle all the Grid actions with your API. The Grid’s custom binding approach is explained below, 

For using custom binding, you need to bind the response data(Grid data) returned from your API as an object of result(JSON data source) and count(Total data count) properties and set it to the Grid’s dataSource property. On setting the data source in this format, the ‘dataStateChange’ event will be triggered with corresponding query for every Grid action performed like Paging, Sorting and Filtering.., and the ‘dataSourceChanged’ event will be triggered while performing CRUD action in Grid. So using this you can send the queries in your required format to your API, process and return the result and then assign the returned result to the Grid’s dataSource property as an object of result and count properties. 

  

private getData(state: DataStateChangeEventArgs): Promise<DataResult> { 

return this.ajax.send().then((response: any) => { 

          let data: any = JSON.parse(response); 

          return { result: data['d']['results'],   // here you can return your data
                       count: parseInt(data['d']['__count'], 10) }; 

      }); 

  } 

Documentation: https://ej2.syncfusion.com/react/documentation/grid/data-binding/#custom-binding

Online Demo: https://ej2.syncfusion.com/react/demos/#/material/grid/custom-binding 

Please get back to us if you require any further assistance. 

Regards, 

Shalini M.