Здраствуйте, я хочу вывести данные из json
в таблицу по датам. В json
есть id (которое тоже хочу вывести) и данные. Вот вид json
:
{
"1": [
{
"date_visit": "2021-06-20",
"presences": true,
"reason": "null"
},
{
"date_visit": "2021-06-21",
"presences": true,
"reason": "null"
},
{
"date_visit": "2021-06-22",
"presences": true,
"reason": "null"
},
{
"date_visit": "2021-06-23",
"presences": true,
"reason": "null"
},
{
"date_visit": "2021-06-24",
"presences": true,
"reason": "null"
},
{
"date_visit": "2021-06-25",
"presences": true,
"reason": "null"
}
],
"4": [
{
"date_visit": "2021-06-19",
"presences": true,
"reason": "null"
},
{
"date_visit": "2021-06-19",
"presences": true,
"reason": "null"
}
]}
Я хочу всё это вывести в таблицу по датам, но не понимаю, как это сделать. Вот мой нынешний код:
import React, {useEffect, useState} from "react";
import {Table, TableBody, TableContainer, TableHead, Paper, Checkbox, Select, MenuItem} from '@material-ui/core';
import {StyledTableCell, StyledTableRow, tableStyles} from "./MainTableStyle";
import axios from "axios";
import {API_URL} from "../config";
const columns = [];
// eslint-disable-next-line array-callback-return
Array(/*new Date().getDate()*/ 24).fill(null).map((item, index) => index + 1).map((day, index) => {
columns.push({id: index, label: day})
})
function MainTable() {
const [data, setData] = useState([]);
let result = "0";
useEffect(() => {
(async () => {
const result = await axios.get(`${API_URL}/childrenGroupTable`, {
headers: {Authorization: localStorage.getItem('token')}
});
setData(result.data);
})();
}, []);
result = data.reduce((a, c) => (
a[c.children_id] ?? (a[c.children_id] = []),
a[c.children_id].push({
date_visit: c.date_visit,
presences: c.presences,
reason: c.reason
}),
a
), {})
console.log(result)
const classes = tableStyles();
if (Object.keys(result).length === 0) {
return (<h1 className={classes.table}>Загрузка</h1>)
}
return ();
}
export default MainTable;