Accessing child properties in an array for JSON objects

[Eunico Cornelius]

Hi all, 

I am just starting to pick-up Syncfusion in my projects so I'm still feeling things out. I wanted to ask about how Grid components can be used for nested JSON properties. I want to display something like this with the ability to update each row and add new ones. Any help would be appreciated.

Im using Typescript with React.

The JSON data should look something like this:

[

  {

    "type": "A",

    "details": [

      { "subtype": "1", "min": "10", "max": "100" },

      { "subtype": "2", "min": "5", "max": "20" }

    ]

  },

  {

    "type": "B",

    "details": [

      { "subtype": "1", "min": "5", "max": "10" },

      { "subtype": "3", "min": "15", "max": "20" },

      { "subtype": "4", "min": "35", "max": "55" }

    ]

  },

  {

    "type": "C",

    "details": [

      { "subtype": "3", "min": "3", "max": "16" },

      { "subtype": "4", "min": "25", "max": "50" },

      { "subtype": "5", "min": "5", "max": "40" }

    ]

  }

]

I hope to create a Grid table like this with edit on each row (note that the blanks are replaced with "-"):

So far, this is my code,

import React from "react";

import { TestDataT } from "../../pages/TestPage";

// Syncfusion Imports

import {

  GridComponent,

  ColumnDirective,

  ColumnsDirective,

} from "@syncfusion/ej2-react-grids";

type TTableProps = {

  data: TestDataT;

};

function TSampleTable({ data }: TTableProps | any) {

  return (

    <div>

      <GridComponent dataSource={data} height={315}>

        <ColumnsDirective>

          <ColumnDirective

            headerText={data[0].type}

            columns={data[0].details}

            // headerTemplate={orderDetail}

            width="150"

          />

        </ColumnsDirective>

      </GridComponent>

    </div>

  );

}

export default TSampleTable;

The type column shows, but there is no min max column when doing this. What am I doing wrong in this case? 

[Hemanthkumar S]

Hi Eunico Cornelius,

Greetings from Syncfusion support.

Based on your provided information, it appears that you want to bind a nested JSON dataSource to the Grid in a stack header manner with an editing feature. This topic has already been discussed in the documentation below, which includes the procedure. Please refer to the provided documentation for more details.

Complex data binding with list of array of objects: https://ej2.syncfusion.com/react/documentation/grid/columns/column-rendering?cs-save-lang=1&cs-lang=js#complex-data-binding-with-list-of-array-of-objects

Stacked header: https://ej2.syncfusion.com/react/documentation/grid/columns/column-headers#stacked-header

Edit: https://ej2.syncfusion.com/react/documentation/grid/editing/edit

Please feel free to contact us if you require any further assistance. We are always available and eager to help you in any way we can.

Regards,

Hemanth Kumar S

[Eunico Cornelius]

Hi Hemanth,

Thank you for your answer. I finally understood that we have to use 

`details.0.subtype`

in order to access all the first item of each array (in this case 1, 1, 3)

How should I approach getting all the data of each type instead of just the first element of the array? (in this case 1,2 inste)

[Vikram Sundararajan]

Hi Eunico Cornelius,

We understand that you are working with Syncfusion Ej2 Grid in your React project and are facing challenges with nested JSON properties. While the grid component supports complex data binding using the dot (.) operator for nested or complex data structures, we'd like to inform you that the current version of Syncfusion Ej2 Grid does not directly support the specific structure of data binding you have described, especially with inner level array collections. Also, displaying nested arrays directly as columns within the grid, as per your requirements, is not currently feasible with Syncfusion Ej2 Grid.

Please let us know if you need any further assistance.

Regards,

Vikram S