CODEWITHSUNDEEP
javascriptreactjsmaterial-ui
Omkar Biradar
Omkar Biradar

Reputation: 73

Display nested object value using MaterialUI DataGrid

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 :)

Upvotes: 6

Views: 3145

Answers (1)

Nick Parsons
Nick Parsons

Reputation: 50684

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.

Upvotes: 6

Related Questions