Topic: Map Data from Object for Datatable on React
Expected behavior I have an array that contains multiple objects with user information. I map over this data and use the result for data for the table. I am currently using react-bootstrap-table to accomplish this and it works fine. However, I like the look of the mdb react datatable and would prefer to use it.
Actual behavior When mapping over the data with mdb react no data is displayed including the headers for the table.
Resources (screenshots, code snippets etc.) The users array looks like this:
[
{
username: "14a272ba-5bf8-4707-806f-847648550f4f",
Attributes: [
{
Name: "given_name",
Value: "John"
},
{
Name: "family_name",
Value: "Doe"
},
{
Name: "address",
Value: "111 Main St"
},
{
Name: "city",
Value: "New York"
},
{
Name: "state",
Value: "New York"
}
],
UserCreateDate: Wed Jun 19 2019 10:51:38 GMT-0400 (Eastern Daylight Time)
},
{
username: "14a272ba-5bf8-4707-806f-847648550f4f",
Attributes: [
{
Name: "given_name",
Value: "Jane"
},
{
Name: "family_name",
Value: "Doe"
},
{
Name: "address",
Value: "112 Main St"
},
{
Name: "city",
Value: "Los Angeles"
},
{
Name: "state",
Value: "California"
}
],
UserCreateDate: Wed Jun 19 2019 11:51:38 GMT-0400 (Eastern Daylight Time)
},
{
username: "14a272ba-5bf8-4707-806f-847648550f4f",
Attributes: [
{
Name: "given_name",
Value: "Bob"
},
{
Name: "family_name",
Value: "Smith"
},
{
Name: "address",
Value: "113 Main St"
},
{
Name: "city",
Value: "Chicago"
},
{
Name: "state",
Value: "Illinois"
}
],
UserCreateDate: Wed Jun 19 2019 12:51:38 GMT-0400 (Eastern Daylight Time)
}
]
This is what I am doing that is not working.
const data = users.map(user => ({
columns: [
{
label: 'First Name',
field: 'given_name',
sort: 'asc',
width: 90
},
{
label: 'Last Name',
field: 'family_name',
sort: 'asc',
width: 90
},
{
label: 'Address',
field: 'address',
sort: 'asc',
width: 45
},
{
label: 'City',
field: 'city',
sort: 'asc',
width: 45
},
{
label: 'State',
field: 'state',
sort: 'asc',
width: 45
}
],
rows: [
{
given_name: user.Attributes[0].Value,
family_name: user.Attributes[1].Value,
city: user.Attributes[2].Value,
state: user.Attributes[3].Value,
}
]
}));
No doubt I'm missing something. Any help would be appreciated.
I transformed your code and data for a working example.
Try something like this.
import React from 'react';
import { MDBDataTable } from 'mdbreact';
const DatatablePage = () => {
const user = [
{
username: "14a272ba-5bf8-4707-806f-847648550f4f",
Attributes: [
{
Name: "given_name",
Value: "John"
},
{
Name: "family_name",
Value: "Doe"
},
{
Name: "address",
Value: "111 Main St"
},
{
Name: "city",
Value: "New York"
},
{
Name: "state",
Value: "New York"
}
],
UserCreateDate: `Wed Jun 19 2019 10:51:38 GMT-0400 (Eastern Daylight Time)`
},
{
username: "14a272ba-5bf8-4707-806f-847648550f4f",
Attributes: [
{
Name: "given_name",
Value: "Jane"
},
{
Name: "family_name",
Value: "Doe"
},
{
Name: "address",
Value: "112 Main St"
},
{
Name: "city",
Value: "Los Angeles"
},
{
Name: "state",
Value: "California"
}
],
UserCreateDate: `Wed Jun 19 2019 11:51:38 GMT-0400 (Eastern Daylight Time)`
},
{
username: "14a272ba-5bf8-4707-806f-847648550f4f",
Attributes: [
{
Name: "given_name",
Value: "Bob"
},
{
Name: "family_name",
Value: "Smith"
},
{
Name: "address",
Value: "113 Main St"
},
{
Name: "city",
Value: "Chicago"
},
{
Name: "state",
Value: "Illinois"
}
],
UserCreateDate: `Wed Jun 19 2019 12:51:38 GMT-0400 (Eastern Daylight Time)`
}
];
const userAttributes = []
user.forEach(el=>{
userAttributes.push({
given_name: el.Attributes[0].Value,
family_name: el.Attributes[1].Value,
address: el.Attributes[2].Value,
city: el.Attributes[3].Value,
state: el.Attributes[4].Value
})
});
const data = {
columns: [
{
label: 'First Name',
field: 'given_name',
sort: 'asc',
width: 90
},
{
label: 'Last Name',
field: 'family_name',
sort: 'asc',
width: 90
},
{
label: 'Address',
field: 'address',
sort: 'asc',
width: 45
},
{
label: 'City',
field: 'city',
sort: 'asc',
width: 45
},
{
label: 'State',
field: 'state',
sort: 'asc',
width: 45
}
],
rows: userAttributes
};
return (
<MDBDataTable
striped
bordered
hover
data={data}
/>
);
}
export default DatatablePage;
but I think this way is better:
import { MDBDataTable } from 'mdbreact';
import React from 'react';
const DatatablePage = () => {
const data = {
columns: [
{
label: 'First Name',
field: 'given_name',
sort: 'asc',
width: 90
},
{
label: 'Last Name',
field: 'family_name',
sort: 'asc',
width: 90
},
{
label: 'Address',
field: 'address',
sort: 'asc',
width: 45
},
{
label: 'City',
field: 'city',
sort: 'asc',
width: 45
},
{
label: 'State',
field: 'state',
sort: 'asc',
width: 45
}
],
rows: [
{
address: '111 Main St',
city: 'New York',
family_name: 'Doe',
given_name: 'John',
state: 'New York'
},
{
address: '112 Main St',
city: 'Los Angeles',
family_name: 'Doe',
given_name: 'Jane',
state: 'California'
},
{
address: '113 Main St',
city: 'Chicago',
family_name: 'Smith',
given_name: 'Bob',
state: 'Illinois'
}
]
};
return <MDBDataTable striped bordered hover data={data} />;
};
export default DatatablePage;
Try this and tell me if the problem still exists.
Best regards, Konrad.
Chris Christensen commented 5 years ago
Hi Konrad,
Thanks so much for the response. I'll give this a try and report back
Chris
Konrad Stępień staff commented 5 years ago
I do waiting for it :)
Best, Konrad.
FREE CONSULTATION
Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.
Answered
- User: Free
- Premium support: No
- Technology: MDB React
- MDB Version: 4.19.0
- Device: Laptop
- Browser: Chrome
- OS: Windows and Linux
- Provided sample code: No
- Provided link: No