Remote Data with DataManager using UrlAdaptor - Cannot display data in grid

[Dean Murphy]

Hi,

I'm cannot get remote data via my own RESTful API to appear in my react grid which reports "no records to display". My service returns json data as follows;

Reading your response to similar issues, I noted that the response should be a json object which includes "count" and "result" attributes with "result" containing the actual rows of data so I have also tried modifying my service to return the following;

This made no difference. My code, based entirely on one of your example apps is;

I would be super grateful for your help resolving this!

Dean

[Dineshnarasimman Muthu]

Hi,

Greetings from Syncfusion Support.

We have reviewed your query, it seems when using the urlAdaptor the data not properly bound to the grid resulting in "No Records to display". Based on the provided code information, we have recreated a similar sample implementing UrlAdpator in the grid with same column and grid configurations. We cannot be able to replicate it from our end. The video demonstration and the image of payload and response has been attached for your reference.

Video:

Payload Image:

 

Response Preview:

 

We request you to provide the following information to validate this further.

• Please provide the controller side code information on how you have handled the server side.

• Ensure us whether you are facing any issues or errors in the developer console.

• Please replicate the issue by modifying the provided sample.

We highly appreciate your co-operation in providing these information.

Regards,

Dineshnarasimman M

Attachment: ReactUrlAdaptor_aa2dfa40.zip

[Dean Murphy]

Thank you for the prompt response. I have reduced my backend process to return a hardcoded fixed json response to ensure that nothing weird or unseen is happening. Here is the python code;

from flask import Flask, request, jsonify

from flask_cors import CORS

import sqlite3

import json

app = Flask(__name__)

CORS(app)

@app.route('/data/', methods=['GET','POST'])

def get_data():

    js = [

    {

      "recordid": 10001,

      "timestamp": "1/2/2000",

      "category": 1

    },

    {

      "recordid": 10002,

      "timestamp": "2/2/2000",

      "category": 2

    }

    ]

     

    fullResult = [

      {

        "count": 2,

        "result": js

      }

    ]

    return fullResult

    # return js

if __name__ == '__main__':

    app.run(debug=True)

And the output it produces in the browser;

[
  {
    "count": 2,
    "result": [
      {
        "category": 1,
        "recordid": 10001,
        "timestamp": "1/2/2000"
      },
      {
        "category": 2,
        "recordid": 10002,
        "timestamp": "2/2/2000"
      }
    ]
  }
]
 Copy

I have looked at the traffic between the front and back end using Wireshark. Here are what I believe are the relevant bits;

Hypertext Transfer Protocol

    POST /data/ HTTP/1.1\r\n
        Request Method: POST
        Request URI: /data/
        Request Version: HTTP/1.1
    Host: 192.168.10.191:5000\r\n
    Connection: keep-alive\r\n
    Content-Length: 23\r\n
    Pragma: no-cache\r\n
    Cache-Control: no-cache\r\n
    User-Agent: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/134.0.0.0 Safari/537.36\r\n
    DNT: 1\r\n
    Content-Type: application/json; charset=utf-8\r\n
    Accept: */*\r\n
    Origin: http://localhost:3001\r\n 
    Referer: http://localhost:3001/\r\n 
    Accept-Encoding: gzip, deflate\r\n
    Accept-Language: en-GB,en-US;q=0.9,en;q=0.8\r\n
    \r\n
    [Response in frame: 16]
    [Full request URI: http://192.168.10.191:5000/data/] 
    File Data: 23 bytes




JavaScript Object Notation: application/json
    Object
        Member: requiresCounts
            [Path with value: /requiresCounts:true]
            [Member with value: requiresCounts:true]
            True value
            Key: requiresCounts
            [Path: /requiresCounts]

...

JavaScript Object Notation: application/json
    Object
        Member: requiresCounts
            [Path with value: /requiresCounts:true]
            [Member with value: requiresCounts:true]
            True value
            Key: requiresCounts
            [Path: /requiresCounts]
 Copy

The demo code on your website runs fine for me locally. The only difference I can see is the backend process providing the json data.

[Dean Murphy]

I found the problem!!

My REST service was returning the wrong structure. The broken code was;

     return [{
           "result": data,
           "count": 46
     }]
 Copy

I had treated the response as an array of objects so the response was;

I finally realised this when I compared my preview with the one you supplied. The corrected code is;

     return {
           "result": data,
           "count": 46
        }
 Copy

resulting in the correct output;

It took me a while to spot my error but your screenshots of a working system really helped when I finally took enough time to look at them closely :)

D.,

[Dineshnarasimman Muthu]

Hi Dean,

 

Thanks for the update, we are glad that the issue has been resolved. Please get back to us for further assistance.

Regards,

Dineshnarasimman M