数据输出到表格

Question

我正在为大学教育部门的工作制作一个网站项目，我需要显示夫妻俩本周的日程安排。 我有从 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": [...]
    }
]

我想将它们显示在一个表格中，其中列包含一周中的日期，行包含班级数。表本身的单元格将包含有关这对夫妇的姓名、领导者以及在哪个办公室的信息。就是这样。 点击

我尝试使用 Map 迭代一周中的所有日子，但是一周中的每一天都有自己的带有类的数组，我不知道如何迭代它。

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;

请告诉我如何做到这一点，如果需要，我可以重写数据输出格式。

Answer 1

这就是答案。 如果答案对你有帮助，我会很高兴。

data.map((day, index) => (
   <tr key = {index}>
      day.map((subject, idx) => {
           <td>{subject.subjectname}<td/>
      })
   </tr>

））