Parsing nested json data in reactjs usind datagrid from material ui

Question

I need to parse nested JSON data to normal JSON which is coming from an API and need to pass that JSON data to a react data grid (am using one available from material ui) like below :

Json Data

 {
      "rows": [
        {
          "id": 101,
          "name": "sample",
          "last_modified": "sample time",
          "countries": [
            {
              "country_id": 1,
              "country_name": "countryA"
            },
            {
              "country_id": 2,
              "country_name": "countryB"
            }
          ]
        },
        {
          "id": 102,
          "name": "sample 2",
          "last_modified": "sample time",
          "cdn": [
            {
              "country_id": 3,
              "country_name": "countryC"
            },
            {
              "country_id": 4,
              "country_name": "countryD"
            }
          ]
        }
       
      ]
    }

In Data.JSX

const checkKeysUnderObject = (obj, result) => {
    for (let key in obj) {
      if (key) {
        result.push(key + " : " + obj[key]);
      }
    }
  };

const columns = [
    { field: 'id', headerName: 'ID', width: 100, hide: true, disableColumnFilter: true,   disableColumnSelector: true, headerAlign:'center'},
    {
      field: 'id',
      headerName: 'ID',
      width: 250, 
      editable: false,
    }, 
    {
    field: 'name',
      headerName: 'Name',
      width: 250, 
      editable: false,
    },
    {
    field: 'last_modified',
      headerName: 'Last Modified',
      width: 250, 
      editable: false,
    },

    {
      field: 'countries',
      headerName: 'Countries',
      width: 500, 
      editable: false,
      disableColumnFilter: true,
    
     valueGetter: (params) => {
        console.log({ params });
        let result = [];
        if (params.row.countries) {
          checkKeysUnderObject(params.row.countries, result);
        } else {
          result = ["Unknown"];
        }:
        return result.join(" , ");
      }
},
}
];

Getting the following output needed to print the country_id and country_name

 0 : [object Object] , 1 : [object Object]

In console log

params 
        params
            id: 101, field: countries, row:
                            countries: Array(2)
                                0: {country_id: 1, country_name: 'countryA'}
                                1: {country_id: 2, country_name: 'countryB'}
                                length: 2
                                [[Prototype]]: Array(0)
                                id: 101
                                last_modified: "sample time"
                                name: "sample"
                [[Prototype]]: Object

Using DataGrid to display

<DataGrid       
              rows={response}
              columns={columns}
              //pageSize={5} 
              //rowsPerPageOptions={[5]}
              autoPageSize
              density='standard'
 />

Can anyone plz help.

Questions:How to render nested JSON elements in ReactJS material-ui based DataGrid? Please provide solution to this issue.

Darshan Subramanya · Answer 1 · 2021-12-16T06:54:11.000

Got required output such as,

country_id : 1 , country_name : countryA , country_id : 2 , country_name : countryB

tried in value getter:

checkKeysUnderObject(params.row.countries[0], result);
checkKeysUnderObject(params.row.countries[1], result);

Answer by Janice Zhong in one of the post material-ui-datagrid-with-nested-data helped to find the solution for this problem faced, thanks

It may be useful to others so posting the answer here, was in confusion not getting the required answer so posted the question and then tried this it worked. Thanks!!!

Parsing nested json data in reactjs usind datagrid from material ui

1 Answers1