How to render a Complex JSON Data into KendoReact Grid

[Tejas]

Hello,

I'm having trouble with KendoReact Grid data. The data is in a complex JSON format, and I'm not sure how to properly display it on the grid. The JSON data changes dynamically, so I can't predetermine its structure for the return for this format.

 <GridColumn field="ProductID" title="ID" width="40px" />
 <GridColumn field="ProductName" title="Name" width="250px" />
 <GridColumn field="Category.CategoryName" title="CategoryName" />
 <GridColumn field="UnitPrice" title="Price" />
 <GridColumn field="UnitsInStock" title="In stock" />

 

I'm using the Map function to dynamically show the data, but it's leading to multiple instances of data being displayed as [object, object]

Can you offer some guidance on how to address this problem?

this is my code link.

https://stackblitz.com/edit/react-v7tmhx?file=app%2Fproducts.json,app%2Fmain.jsx

 

 

 

[Tejas]

sample of Complex json format 

[
  {
    "selectedTests": [
      {
        "testId": 110,
        "testName": "Semen Analysis, Semen",
        "shortName": "NULL"
      }
    ],
    "patientName": "Kendra A. Bellamy 88",
    "dateOfBirth": "1942-06-15T18:30:00.000Z",
    "age": {
      "value": 80,
      "ageType": "Year"
    },
    "referredDoctor": "Susan C. Francis",
    "membershipType": {
      "label": "Gold",
      "value": 1
    },
    "gender": {
      "name": "Male",
      "value": 1
    },
    "registrationDate": "2023-06-01T18:30:00.000Z",
    "address": "3340 Point Street Chicago, IL 60629",
    "processingLocation": {
      "label": "Kolhapur",
      "value": 431
    },
    "collectionCenter": {
      "label": "Sola",
      "value": 26
    },
    "client": {
      "label": "nj",
      "value": 34
    },
    "franchise": {
      "label": "DEMOOR",
      "value": 13
    },
    "doctor": {
      "label": "Dr. RAk RAK",
      "value": 88
    },
    "patientId": 228,
    "adharNumber": "676767676767676767"
  },
  {
    "selectedTests": [
      {
        "testId": 128,
        "testName": "Complete Blood Count",
        "shortName": "CBC"
      },
      {
        "testId": 3,
        "testName": "Amylase, Total, Serum",
        "shortName": "NULL"
      },
      {
        "testId": 18,
        "testName": "Antinuclear Antibodies, HEp-2 Substrate, IgG, Serum",
        "shortName": "NULL"
      }
    ],
    "patientName": "Demo patient update",
    "dateOfBirth": "1957-06-04T18:30:00.000Z",
    "age": {
      "value": 65,
      "ageType": "Year"
    },
    "referredDoctor": "Dr. ABC",
    "membershipType": {
      "label": "Gold",
      "value": 1
    },
    "registrationDate": "2023-06-01T18:30:00.000Z",
    "gender": {
      "name": "Male",
      "value": 1
    },
    "address": "Pune",
    "processingLocation": {
      "label": "New Era",
      "value": 488
    },
    "collectionCenter": {
      "label": "string",
      "value": 20
    },
    "client": {
      "label": "Barton Adams ",
      "value": 35
    },
    "franchise": {
      "label": "ElabNext",
      "value": 1
    },
    "doctor": {
      "label": "Dr.  Dr Blessing Lecher",
      "value": 92
    },
    "patientId": 234
  },
  {
    "selectedTests": [
      {
        "testId": 128,
        "testName": "Complete Blood Count",
        "shortName": "CBC"
      },
      {
        "testId": 8,
        "testName": "Acid-Fast Smear for Mycobacterium, Varies",
        "shortName": "NULL"
      }
    ],
    "patientName": "dddd",
    "referredDoctor": "dr. kantilal mishra",
    "dateOfBirth": "2000-01-26T18:30:00.000Z",
    "age": {
      "value": 23,
      "ageType": "Year"
    },
    "membershipType": {
      "label": "Platinum",
      "value": 4
    },
    "gender": {
      "name": "Male",
      "value": 1
    },
    "registrationDate": "2023-06-04T18:30:00.000Z",
    "address": "viman nagar pune",
    "processingLocation": {
      "label": "los AngeleSS",
      "value": 433
    },
    "collectionCenter": {
      "label": "string",
      "value": 20
    },
    "client": {
      "label": "Barton Adams ",
      "value": 35
    },
    "franchise": {
      "label": "new Franchise",
      "value": 22
    },
    "doctor": {
      "label": "Dr.  Dr Blessing Lecher",
      "value": 92
    },
    "patientId": 235
  },
  {
    "selectedTests": [
      {
        "testId": 238,
        "testName": "992982",
        "shortName": "afd"
      },
      {
        "testId": 109,
        "testName": "Adenosine Deaminase, Pleural Fluid",
        "shortName": "NULL"
      },
      {
        "testId": 128,
        "testName": "Complete Blood Count",
        "shortName": "CBC"
      }
    ],
    "dateOfBirth": "2008-06-10T18:30:00.000Z",
    "patientId": 236,
    "patientName": "aaaaa",
    "age": {
      "value": 15,
      "ageType": "Year"
    },
    "gender": {
      "name": "Female",
      "value": 2
    }
  }
]   

 

 

 

[Konstantin Dikov]

Hi Tejas,

The KendoReact Grid will not be able to resolve fields that are complex objects or arrays on its own, so you will have to implement custom cells for rendering the collections and the nested objects.

For your convenience I have modified the example to use custom cell conditionally and render arrays and objects data:

• https://stackblitz.com/edit/react-v7tmhx-suzlvy?file=app%2Fmain.jsx

For more levels you might have to introduce recursion.

Hope this helps.

 

Regards,
Konstantin Dikov
Progress Telerik

[Doug]

Tejas,

Can you make those transformations with a React Hook?