0
84
ViewsMap the data according to image in react js
I am trying to loop the API data into a table as in the image, but I am getting an error.
I want date-wise data main module name must come as table headers, and corresponding sub-modules will come under the main module as in the image.
Note: the main module will have more than one sub-module as in the image.
The last table header will be custom. It will have all the custom module names displayed date-wise.
<div style={{ display: "flex" }}>
{predefined.map((personData, index) => { ///mapping mainmodules
return (
<thead>
<tr>
<th style={styles.th}>{personData.mainModule}</th>
</tr>
{personData.submodule
.filter((e) => e.completed == true) ///maping submodules
.map((subModule) => {
return (
<>
<tr>
<td style={styles.td}>{subModule.subModuleName}</td>
</tr>
</>
);
})}
</thead>
);
})}
<thead>
<tr>
<th style={styles.th}>custum</th>
</tr>
{custom.map((personData, index) => {
return (
<tr>
<td style={styles.td}>{personData.name}</td>{" "}
</tr>
);
})}
</thead>
I have created a code sandbox of complete code I tried.
https://codesandbox.io/s/blissful-http-fdl0f?file=/src/App.js
·
Juan Pablo Isaza
3 answers
Answer question0
You can try to use filter like this. Not sure if that's what you're looking for.
{predefined.filter(item => item.module === 'mainmodule1').map((module, index) => {
return (
<td key={index}></td>
)
})}
{predefined.filter(item => item.module === 'mainmodule2').map((module, index) => {
return (
<td key={index}></td>
)
})}
·
Juan Pablo Isaza
Report
0
Is this what you want? Can you elaborate more on your problem with an example to understand better.
useEffect(() => {
const config = {
headers: {
Authorization: `token 52ae6ea1759163fcdab109ca0f883afb7b2df857`
}
};
axios
.get(
"/all-activity-data/?customer=20",
config
)
.then((res) => {
console.log(res.data);
let filteredData = {};
let filteredData2 = {date: ''};
res.data.Predefined.forEach((e) => {
if (e.completed === true){
filteredData[e.date] = filteredData[e.date] ? [...filteredData[e.date], e] : [e]
filteredData2[e.mainModule] = ""
};
});
setheaders(filteredData2);
console.log(filteredData)
setcustom(filteredData);
setpredefined(res.data.Predefined);
});
}, []);
...
return (
<div style={{ display: "flex" }}>
<table>
<thead>
<tr>
{Object.keys(headers).map((personData, index) => {
return (
<th style={styles.th}>{personData}</th>
);
})}
</tr>
</thead>
{/* <tbody> */}
{Object.keys(custom).map((personData, index) => {
return (
<tr>
<td>{personData}</td>
{custom[personData].map(el => <td>{el.submodule}</td>)}
</tr>
);
})}
{/* </tbody> */}
<thead>
<tr>
<th style={styles.th}>custum</th>
</tr>
{/* {custom.map((personData, index) => {
return (
<tr>
<td style={styles.td}>{personData.name}</td>{" "}
</tr>
);
})} */}
</thead>
</table>
</div>
);
·
Juan Pablo Isaza
Report
0
here is the sample code that you’re looking for I guess.
demo codesandbox url: https://codesandbox.io/s/confident-night-lrjuf?file=/src/App.js
output looks like this
App.js
import React, { useState, useEffect } from "react";
import axios from "axios";
import moment from "moment";
import "./styles.css";
export default function ActivityTracker(props) {
const [predefined, setpredefined] = useState([]);
const [custom, setcustom] = useState([]);
var pikerdate = moment().format("YYYY-MM-DD");
useEffect(() => {
const config = {
...// your config
};
axios
.get(
"customer/get-all-activity-data/?customer=20",
config
)
.then((res) => {
let filteredData = [];
let filteredData2 = [];
res.data.Custom.forEach((e) => {
if (e.completed === true) filteredData.push(e);
});
filteredData.sort(
(a, b) => new Date(a.date).getTime() - new Date(b.date).getTime()
);
setcustom(filteredData);
setpredefined(res.data.Predefined);
});
}, []);
console.log(custom);
return (
<div style={{ display: "flex" }}>
<thead>
<tr>
<th style={styles.th}>Date</th>
</tr>
{predefined.map((personData, index) => {
return (
<tr>
<td style={styles.td}>{personData.date}</td>
</tr>
);
})}
</thead>
{predefined.map((personData, index) => {
return (
<thead>
<tr>
<th style={styles.th}>{personData.mainModule}</th>
</tr>
{predefined
.filter(
(e) => e.completed && e.mainModule === personData.mainModule
)
.map((subModule, index) => {
return (
<tr key={index}>
<td style={styles.td}>{subModule.mainModule}</td>
</tr>
);
})}
</thead>
);
})}
<thead>
<tr>
<th style={styles.th}>custum</th>
</tr>
{custom.map((personData, index) => {
return (
<tr>
<td style={styles.td}>{personData.activity}</td>{" "}
</tr>
);
})}
</thead>
</div>
);
}
·
Juan Pablo Isaza
Report
Answer question