Bind JSON response as data source

I am using a Grid to try to display the results of querying a local database. The response from my web server is as follows:

  db.all("SELECT * FROM Users;", (err, rows) => {
    if (err) {
      res.send(err)
    }
    else {
      var o = {}
      o["result"] = rows
      o["count"] = rows.length
      res.send(o)
    }
  });


This sends a response like: 

{"result":[{"UserName":"jdoe","FirstName":"John","LastName":"Doe"},{"UserName":"doej","FirstName":"Jane","LastName":"Doe"}],"count":2}

My Javascript is as follows:

var data = new ej.data.DataManager({
    url: 'http://localhost:1000/users',
    adaptor: new ej.data.UrlAdaptor()
});

var grid = new ej.grids.Grid({
    dataSource: data,
    columns: [
        { field: 'UserName', headerText: 'Username', textAlign: 'Right', width: 120, type: 'string' },
        { field: 'FirstName', width: 140, headerText: 'First Name', type: 'string' },
        { field: 'LastName', headerText: 'Last Name', textAlign: 'Right', width: 120, format: 'string' },
    ],
    actionFailure: (e) => {
        console.log(e)
        var span = document.createElement('span');
        grid.element.parentNode.insertBefore(span, grid.element);
        span.style.color = "#FF0000"
        span.innerHTML = "Error!"
    },
    height: 180
});

grid.appendTo('#Grid');


When I try to run this as is, the error action runs, but I haven't been able to determine the actual cause of that error because I can't figure out what e is. Any ideas on why my grid isn'


7 Replies 1 reply marked as answer

VB Vinitha Balasubramanian Syncfusion Team June 20, 2022 10:08 AM UTC

Hi Derek Saffie,


Greetings from Syncfusion support.


Query : Bind JSON response as data source


Before proceeding your query, we need some more details to validate the reported scenario. You have mentioned that actionFailure event triggers in your sample. So kindly share the below details with us which is more helpful to proceed your query further.


  • Please share the screenshot of actionFailure event argument in console.
  • Please share the package version of your sample.
  • Is there any script error?


Regards,

Vinitha Balasubramanian


Marked as answer

DS Derek Saffie replied to Vinitha Balasubramanian June 20, 2022 12:31 PM UTC

Hi Vinitha, 


There is no script error from what I can tell. If I modify actionFailure like:


Nothing is every output to the console. I did try modifying the HTML to display some information about the error event:


But all it tells me is e is an "object". I've tried to figure out how to get an error message or other info out of e, but I haven't been able to do so. Any suggestions?


I had downloaded SyncFusion 20.1.0.55



DS Derek Saffie replied to Vinitha Balasubramanian June 21, 2022 01:37 PM UTC

Actually, from what I can tell, it is not even hitting my web server. Maybe the error is before that even happens?



VB Vinitha Balasubramanian Syncfusion Team June 22, 2022 06:31 AM UTC

Hi Derek Saffie,


Thanks for the update.


For further validation, We need some more detail that will be helpful for us to provide a better solution.


  • kindly ensure whether your url is valid.
  • Kindly share the issue replicated sample with us if possible, to validate your query.


Regards,

Vinitha Balasubramanian



DS Derek Saffie replied to Vinitha Balasubramanian June 22, 2022 12:01 PM UTC

What I discovered was the DataAdaptor uses POST and not GET. I couldn't find much documentation for that outside of this forum. Is there any formal documentation of the POST request and expected body aside from what is in this forum?



VB Vinitha Balasubramanian Syncfusion Team June 23, 2022 06:45 PM UTC

Hi Derek Saffie,


Currently we are working your query and we will update further details on June 28, 2022.


until then we appreciate your patience.


Regards,

Vinitha Balasubramanian



VB Vinitha Balasubramanian Syncfusion Team June 29, 2022 05:38 AM UTC

Hi Derek Saffie,


Thanks for the patience.


We want to convey that URL adaptor will send a POST request for data fetching, CRUD action which is the default behavior.


If you want to use GET request we suggested you to use WebAPIAdaptor which will send GET request for data fetching and for CRUD operation, POST, PUT , DELETE request.


Kindly refer the below provided documentation for your reference.


Documentation link : https://ej2.syncfusion.com/documentation/data/adaptors/#web-api-adaptor


Regards,

Vinitha Balasubramanian


Loader.
Up arrow icon