I have this data:
const data = [
{
_id: '1',
status: 'active',
user: {
email: 'one@mail.com',
provider: 'google',
profile: {
image: 'https://example.com/image1.jpg',
},
},
},
{
_id: '2',
status: 'inactive',
user: {
email: 'two@mail.com',
provider: 'github',
profile: {
image: 'https://example.com/image2.jpg',
},
},
},
]
const head = ['_id', 'status', 'email', 'image']
const body = ['_id', 'status', 'user.email', 'user.profile.image']
I want to display in the table dynamically only show the string in the body array.
I tried and it worked _id, and status but not the string which contains dot
Here is what I have tried:
data.map((item) => (
<tr key={item._id}>
{body.map((i, index) => (
<td key={index}>{item[i]}</td>
))}
</tr>
))
If your body data is not dynamic you can do :
data.map((item) => (
<tr key={item._id}>
<>
<td key={index}>{item._id}</td>
<td key={index}>{item.status}</td>
<td key={index}>{item.user.email}</td>
<td key={index}>{item.user.profile.image}</td>
<>
</tr>
))
else you can use
const deeper = (data, array) => {
if(array.length > 1){
return deeper(data[array[0]], array.slice(1, array.length))
} else {
return data[array[0]]
}
}
with
data.map((item) => (
<tr key={item._id}>
{body.map((i, index) => (
<td key={index}>{deeper(item, i.split('.'))}</td>
))}
</tr>
))
Something like that
here is my way to achieve your desire output.
use this function
function getDeepObjValue (item, s) {
return s.split('.').reduce((p, c) => {
p = p[c];
return p;
}, item);
};
use it like this
data.map((item) => {
return (
<tr key={item._id}>
{body.map((keys, i) => {
return <td key={i}>{getDeepObjValue(item, keys)}</td>;
})}
</tr>
);
})
and if you want to check demo click here