javascript - forEach() 不能与我的 HTML 标签一起正常工作，在 JSON 上循环

问题描述

我有来自 API 的以下 json 响应，它保存到const users：

[{
        "id": 1,
        "name": "Ani",
        "workingHours": {
            "days": {
                "1": {
                    "day": "Monday",
                    "hours": [
                        {
                            "start": "09:00:00",
                            "end": "11:20:00"
                        },
                        {
                            "start": "14:00:00",
                            "end": "17:40:00"
                        }
                    ]
                },
                "2"
                    "day": "Tuesday",
                    "hours": [
                        {
                            "start": "09:00:00",
                            "end": "12:30:00"
                        },
                        {
                            "start": "13:00:00",
                            "end": "19:30:00"
                        }
                    ]
                },
                "3": {
                    "day": "Wednesday",
                    "hours": [
                        {
                            "start": "09:00:00",
                            "end": "12:30:00"
                        },
                        {
                            "start": "14:00:00",
                            "end": "18:30:00"
                        }
                    ]
                }
            }
        }
    },
{
        "id": 2,
        "name": "Ben",
        "workingHours": {
            "days": {
                "1": {
                    "day": "Monday",
                    "hours": [
                        {
                            "start": "09:00:00",
                            "end": "12:30:00"
                        },
                        {
                            "start": "14:00:00",
                            "end": "18:30:00"
                        }
                    ]
                },
                "2": {
                    "day": "Tuesday",
                    "hours": [
                        {
                            "start": "09:00:00",
                            "end": "12:30:00"
                        },
                        {
                            "start": "15:00:00",
                            "end": "18:30:00"
                        }
                    ]
                },
            }
        }
    }]

我想在我的应用程序中为员工显示以下文本：

Ani
Monday: 09:00 - 12:30 && 14:00 - 18:30
Tuesday: 09:00 - 12:30 && 15:00 - 18:30
Wednesday: 09:00 - 12:30 && 14:00 - 18:30 
Ben
Monday: 09:00 - 12:30 && 14:00 - 18:30
Tuesday: 09:00 - 12:30 && 15:00 - 18:30

如何在 Javascript/Typescript 中实现这一点？

我告诉你我已经尝试过什么。

{users &&
            users.map((user: any) => (
              <p key={user.id}>{user.name}</p> //this is shown correctly
                   {user.workingHours.days.length != 0 &&
                        Object.values(
                          user.workingHours.days
                        ).forEach((entry: any) => (
                          <>
                            <p>{entry.day}</p> 
                            {entry.hours &&
                              entry.hours.map((hour: any) => (
                                <p>
                                  {hour.start} - {hour.end} &&
                                </p>
                              ))}
                          </>
                        ))}

                      
                      )}

我知道我在显示hour.startand时执行错误hour.end，但至少我认为我能够正确显示entry.day。这不会发生，我也不知道为什么，即使我可以成功记录它：

{users &&
                users.map((user: any) => (
                 console.log(user.name);
                       {user.workingHours.days.length != 0 &&
                            Object.values(
                              user.workingHours.days
                            ).forEach((entry: any) => (
                              <>
                                console.log(entry.day)                
             ))}
)}

日志：

Ani
Monday
Tuesday
Ben
Monday
Tuesday
Wednesday

似乎 forEach 根本不适用于 HTML 标签。

有人可以告诉我如何在我的页面中显示以下文本吗？

Ani
    Monday: 09:00 - 12:30 && 14:00 - 18:30
    Tuesday: 09:00 - 12:30 && 15:00 - 18:30
    Wednesday: 09:00 - 12:30 | 14:00 - 18:30 
    Ben
    Monday: 09:00 - 12:30 && 14:00 - 18:30
    Tuesday: 09:00 - 12:30 && 15:00 - 18:30

标签： javascripthtmltypescript

javascript - forEach() 不能与我的 HTML 标签一起正常工作，在 JSON 上循环

问题描述

解决方案

推荐阅读