Javascript 如何在React中显示具有不同键的JSON？

我有一个输入

JSON

，如下所示：

data: {
    “2020-09-19”: [
        {
            end: “2020-09-19T10:30:00Z”,
            start: “2020-09-19T06:52:10Z”,
            user: “rakul”
        },
        {
            end: “2020-09-19T18:30:00Z”,
            start: “2020-09-19T10:30:00Z”,
            user: “jeet”
        },
        {
            end: “2020-09-20T02:30:00Z”,
            start: “2020-09-19T18:30:00Z”,
            user: “rahul”
        }
    ],
    “2020-09-22": [
        {
            end: “2020-09-20T10:30:00Z”,
            start: “2020-09-20T02:30:00Z”,
            user: “rakul”
        },
        {
            end: “2020-09-20T18:30:00Z”,
            start: “2020-09-20T10:30:00Z”,
            user: “jeet”
        },
        {
            end: “2020-09-21T02:30:00Z”,
            start: “2020-09-20T18:30:00Z”,
            user: “rahul”
        }
    ]
}

我想在React中以以下格式显示

JSON

：

我在这里面临的挑战是，由于

JSON

包含多个日期不同的键，因此我无法对对象执行

map

。有人能建议如何以如图所示的表格/列表格式显示上述

JSON

？

使用

Object.entries（）


const数据={
"2020-09-19": [
{
完：“2020-09-19T10:30:00Z”，
开始：“2020-09-19T06:52:10Z”，
用户：“rakul”，
},
{
完：“2020-09-19T18:30:00Z”，
开始：“2020-09-19T10:30:00Z”，
用户：“吉特”，
},
{
完：“2020-09-20T02:30:00Z”，
开始：“2020-09-19T18:30:00Z”，
用户：“rahul”，
},
],
"2020-09-22": [
{
完：“2020-09-20T10:30:00Z”，
开始：“2020-09-20T02:30:00Z”，
用户：“rakul”，
},
{
完：“2020-09-20T18:30:00Z”，
开始：“2020-09-20T10:30:00Z”，
用户：“吉特”，
},
{
完：“2020-09-21T02:30:00Z”，
开始：“2020-09-20T18:30:00Z”，
用户：“rahul”，
},
],
}
Object.entries（data.forEach）（[date，content]）=>{
console.log（日期）
content.forEach（（c）=>{
console.log（'\t'，c.start，c.end，c.user）
})
})
请参见不带样式的基本示例

数据
是一个具有键：值对的对象。该键是您在计划顶部要求的日期，其中该键的值是信息（结束/开始/用户）

一个选项是使用该函数迭代
数据
对象并映射明细表组件，从而呈现数据

const ScheduleList = (props) => {

  return (
    Object.keys(props.data).map(dateKey => {
      return <Schedule key={dateKey} dates={props.data[dateKey]} date={dateKey} />
    })
  );
}

const ScheduleList=（props）=>{
返回(
Object.keys（props.data）.map（dateKey=>{
返回
})
);
}

和一个简单的用例

const App = () => {     

    return <ScheduleList data={data} />
}

const-App=（）=>{
返回
}

计划
组件将负责数据的显示。粗体日期将作为props.date提供，而结束/开始/用户数据将作为props.dates提供在
计划
组件中。
我认为您的问题与从对象到数组的转换更相关，以便能够对其进行迭代。有多种方法可以做到这一点：

1-您可以按照@hgb123推荐的方式使用：


constmyobject={a:1，b:2，c:3}；
const myArray=Object.entries（myObject）；
log（myArray）