Data output to a table

Question

I am making a website project for the work of the university's educational department, and I need to display the couples' schedule for the week. I have such data that I receive from the API.

[
    {
        "Monday": [
            {
                "id": 1,
                "subjectname": "Алгоритмы и вычислительные методы оптимизации",
                "formatsubject": "Практика",
                "teacher": "Куанышев В. Т.",
                "groupname": "ПЕ-12б",
                "numberpair": 1,
                "date_subject": "2024-04-22",
                "auditorium": "405 УК1"
            },
            {
                "auditorium": "303 УК1",
                "date_subject": "2024-04-22",
                "numberpair": 2,
                "groupname": "ПЕ-12б",
                "teacher": "Бурумбаев Д. И.",
                "formatsubject": "Практика",
                "subjectname": "Сетевое программирование",
                "id": 4
            },
         ...
            {
                "auditorium": "",
                "date_subject": "",
                "numberpair": 7,
                "groupname": "",
                "teacher": "",
                "formatsubject": "",
                "subjectname": "",
                "id": ""
            }
        ]
    },
    {
        "Tuesday": [...]
    },
    {
        "Wednesday": [...]
    },
    {
        "Thursday": [...]
    },
    {
        "Friday": [...]
    },
    {
        "Saturday": [...]
    }
]

I want to display them in a table in which the columns would contain the days of the week, and the rows would contain the numbers of classes. The cells of the table themselves would contain information about the name of the couple, who leads it and in which office. That's about it. Click

I tried using Map to iterate over all the days of the week, but each day of the week has its own array with classes, and I do not know how to iterate over it.

import axios from "axios";
import React, {useEffect, useState} from 'react';

function Table() {
    const [data, setData] = useState([])
    useEffect(() => {
        axios.get('http://localhost:8080/getallshedule?date_start=2024-04-22&date_end=2024-04-27&groupname=ПЕ-12б')
        .then(res => setData(res.data))
        .catch(er => console.log(er));
    }, [])
    

    return (
        
        <div>
            <table>
                <thead>
                    <tr>
                        <th>Pair</th>
                        <th>Monday</th>
                        <th>Tuesday</th>
                        <th>Wednesday</th>
                        <th>Thursday</th>
                        <th>Friday</th>
                        <th>Saturday</th>
                    </tr>
                </thead>
                <tbody>
                    {
                        data.map((day, index) => (
                            
                            <tr key = {index}>
                                <td>{day.subjectname}</td>
                            </tr>
                            
                        ))
                    }
                </tbody>
            </table>
        </div>
    )
}

export default Table;

Please tell me how to do this, if necessary, I can rewrite the data output format.

Answer 1

import axios from "axios";
import React, { useEffect, useState } from "react";

function Table() {
  const [data, setData] = useState([]);
  const [modifiedData, setmodifiedData] = useState([]);
  useEffect(() => {
    axios
      .get(
        "http://localhost:8080/getallshedule?date_start=2024-04-22&date_end=2024-04-27&groupname=ПЕ-12б"
      )
      .then((res) => {
        setData(res.data);
        let modifiedDataT = [
          [0, 0, 0, 0, 0, 0],
          [0, 0, 0, 0, 0, 0],
          [0, 0, 0, 0, 0, 0],
          [0, 0, 0, 0, 0, 0],
          [0, 0, 0, 0, 0, 0],
          [0, 0, 0, 0, 0, 0],
          [0, 0, 0, 0, 0, 0],
        ];
        const arr = [
          "Monday",
          "Tuesday",
          "Wednesday",
          "Thursday",
          "Friday",
          "Saturday",
        ];
        for (var i = 0; i < 6; i++) {
          if (data[i] && data[i][arr[i]]) {
            let classesforDay = data[i][arr[i]];
            console.log(classesforDay);
            for (let index = 0; index < classesforDay.length; index++) {
              let obj = classesforDay[index];
              console.log(obj);
              modifiedDataT [obj["numberpair"] - 1][i] =
                obj["subjectname"] +
                "\n" +
                obj["teacher"] +
                "\n" +
                obj["auditorium"];
            }
          }
        }
        setmodifiedData(modifiedDataT);
      })
      .catch((er) => console.log(er));
  }, []);

  return (
    <div>
      <table>
        <thead>
          <tr>
            <th>Pair</th>
            <th>Monday</th>
            <th>Tuesday</th>
            <th>Wednesday</th>
            <th>Thursday</th>
            <th>Friday</th>
            <th>Saturday</th>
          </tr>
        </thead>
        <tbody>
          
          {modifiedData.map((x, i) => (
            <tr>
              <td> {i + 1} </td>
              <td> {modifiedData[i][0]} </td>
              <td> {modifiedData[i][1]} </td>
              <td> {modifiedData[i][2]} </td>
              <td> {modifiedData[i][3]} </td>
              <td> {modifiedData[i][4]} </td>
              <td> {modifiedData[i][5]} </td>
            </tr>
          ))}
        </tbody>
      </table>
    </div>
  );
}

export default Table;