Display nested object value using MaterialUI DataGrid

Question

Hello Stackoverflow fellas, I am trying to fetch data from API and import it into data grid in React js.

Following is the data format that I am getting from API.

{data: Array(200)}
data
: 
(200) [{…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, …]
[[Prototype]]
: 
Object

data: 
[
{type: 'PropertyDamage', id: '100', attributes: {identification_number: '3931', damage_date: '2021-04-29', report_date: '2021-06-26'}},
{type: 'PropertyDamage', id: '101', attributes: {identification_number: '3839', damage_date: '2021-01-21', report_date: '2021-08-25'}},
{type: 'PropertyDamage', id: '102', attributes: {identification_number: '3735', damage_date: '2021-04-25', report_date: '2021-10-29'}}
]

These are the columns that i am mapping with the data. In datagrid, "id" parameter is shown properly.

const columns = [
  { field: 'id', headerName: "ID" },
  {
    field: "attributes.identification_number",
    headerName: "Identification Number",
    headerAlign: "left",
    align: "left",
    flex: 1,
  },
  {
    field: "attributes.damage_date",
    headerName: "Damage Date",
    flex: 1,
  },
  {
    field: "attributes.report_date",
    headerName: "Report Date",
    flex: 1,
  },
];

I am fetching API using the following code using useEffect and useState.

const Dashboard = () => {
  
  const [propertydamages, setPropertyDamages] = useState([]);

  useEffect(() => 
    {
        const url = "URL";
            fetch(url, {
            method: "GET",
            withCredentials: true,
            headers: {
                'X-API-Key': 'API Key'
            }
            })
            .then((response) => response.json())
            .then((json) => {
              setPropertyDamages(json)
            } )
            .catch(function(error) {
                console.log(error);
            });
    }, [])

  return (
    <Box m="20px">
      {/* Data Grid */}
        <DataGrid 
            rows = {propertydamages}
            columns = {columns}
        />
    </Box>
  );
};

When I try to fetch values of attributes such as identification number (which is a value inside the object) by using "attributes.identification_number", it does not work. Just to see I tried writing "attributes" only I got a response like this [object object]. How should I get values such as identification_number, damage_date, and report_date? Thank you so much in advance :)

identification_number is not an attribute here, "attributes.identification_number" is the value of the field attribute. You could access it with the field attributes of the elements of your array. — Emilien, Dec 15 '22 at 10:21
@Emilien Yes! "attributes.identification_number" is the value of the field attribute that I am trying to fetch. — Omkar Biradar, Dec 15 '22 at 10:25
Just thinking, is it possible to map/transform the response to include attributes in each item — Azzy, Dec 15 '22 at 10:27
@JoelGarciaNuño Thank you for your comment. I have already tried this but it was not working — Omkar Biradar, Dec 15 '22 at 10:33
You can use a property string to access an object value using the answer from here [Accessing nested JavaScript objects and arrays by string path](https://stackoverflow.com/q/6491463) — Nick Parsons, Dec 15 '22 at 10:34
Is this a MaterialUI question? (please add that as a tag if so) — Nick Parsons, Dec 15 '22 at 10:51
@NickParsons Yes you are correct, it is a MaterialUI question. I have added it. Thank you :) — Omkar Biradar, Dec 15 '22 at 10:52
I'm probably missing something.. anyway I see you have `data` being an array of objects being your records and `columns` being the definition of the attributes used in those data objects. You are supposedly trying to read the values from the `data` object. Did you try something like `console.log( data[0].attributes.identification_number );`? That's the question you are asking? — Diego D, Dec 15 '22 at 11:03

score 4 · Accepted Answer · answered Dec 15 '22 at 11:14

4

In Material UI the DataGrid component accepts an array of column objects for its column prop. These objects can have a valueGetter to specify how the value should be used for rendering, sorting and filtering:

{
  field: "identification_number",
  headerName: "Identification Number",
  headerAlign: "left",
  align: "left",
  flex: 1,
  valueGetter: params => params.row.attributes.identification_number
},

You can update your column objects to use a valueGetter for nested objects. You can read more about the valueGetter option in the docs.

answered Dec 15 '22 at 11:14

Nick Parsons

45,728
6
46
64

This was the answer I was looking for. Today I got to learn new things in this reactjs learning journey. Thank you so much for your documentation. I will go through it. – Omkar Biradar Dec 15 '22 at 11:20
@OmkarBiradar No worries, I recommend checking out [this](https://mui.com/x/react-data-grid/) also for some examples on how `DataGrid` is used (there are buttons below each example that allows you to see and edit the code used for the example). The first example on that page actually uses a `valueGetter` also. – Nick Parsons Dec 15 '22 at 11:24
I used ValueGetter to fetch values for each and every column but now the problem I am getting is "Maximum call stack size exceeded". When I use it for only one column then it works properly – Omkar Biradar Dec 15 '22 at 11:30
@OmkarBiradar Sounds like a recursion error. Make sure none of your code is potentially calling itself again and ending up in an infinite loop – Nick Parsons Dec 15 '22 at 11:34

Display nested object value using MaterialUI DataGrid

1 Answers1