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
– Emilien, Commented Dec 15, 2022 at 10:21
@Emilien Yes! "attributes.identification_number" is the value of the field attribute that I am trying to fetch. — Omkar Biradar
– Omkar Biradar, Commented Dec 15, 2022 at 10:25
Just thinking, is it possible to map/transform the response to include attributes in each item — Azzy
– Azzy, Commented Dec 15, 2022 at 10:27
@JoelGarciaNuño Thank you for your comment. I have already tried this but it was not working — Omkar Biradar
– Omkar Biradar, Commented Dec 15, 2022 at 10:33

Nick Parsons · Accepted Answer · 2022-12-15 11:14:34Z

7

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, 2022 at 11:14

Nick Parsons

51.7k6 gold badges62 silver badges80 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

Omkar Biradar Over a year ago

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.

Nick Parsons Over a year ago

@OmkarBiradar No worries, I recommend checking out this 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.

Omkar Biradar Over a year ago

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

Nick Parsons Over a year ago

@OmkarBiradar Sounds like a recursion error. Make sure none of your code is potentially calling itself again and ending up in an infinite loop

Collectives™ on Stack Overflow

Display nested object value using MaterialUI DataGrid

1 Answer 1

4 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

4 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related