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

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

• javascript
• reactjs
• material-ui

Share Improve this question Follow edited Dec 16, 2022 at 11:05 Nick Parsons 51.2k66 gold badges5757 silver badges7878 bronze badges asked Dec 15, 2022 at 10:18 Omkar BiradarOmkar Biradar 7311 silver badge77 bronze badges 11

• 1 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 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 Commented Dec 15, 2022 at 10:25
• Just thinking, is it possible to map/transform the response to include attributes in each item – Azzy Commented Dec 15, 2022 at 10:27
• Did you try to access like, "attributes['report_date']"? – Joel Garcia Nuño Commented Dec 15, 2022 at 10:30
• @JoelGarciaNuño Thank you for your ment. I have already tried this but it was not working – Omkar Biradar Commented Dec 15, 2022 at 10:33

 |  Show 6 more ments

1 Answer 1

Sorted by: Reset to default 7

In Material UI the DataGrid ponent 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.