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

Question

我有一个输入 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，如图所示吗？

Answer 1

我认为您的问题更多地与从对象到数组的转换有关，以便能够对其进行迭代。有多种方法可以做到这一点:

1 - 您可以使用 Object.entries()正如@hgb123 向您推荐的那样:

const myObject = { a: 1, b: 2, c: 3};
const myArray = Object.entries(myObject);
console.log(myArray);

2 - 您可以使用 Object.keys() 获取对象的键，正如@Gandzal 向您推荐的那样，并迭代返回的数组:

const myObject = { a: 1, b: 2, c: 3};
const myKeys = Object.keys(myObject);
console.log(myKeys);
const myArray = myKeys.map(key => [key, myObject[key]]);
console.log(myArray);

3 - 或者您可以使用 Array.prototype.reduce()在 Object.keys() 返回的数组上:

const myObject = { a: 1, b: 2, c: 3};
const myArray = Object.keys(myObject).reduce((arr, key) => [...arr, [key, myObject[key]]], []);
console.log(myArray);

无论您选择哪种方法，迭代数组并在转换后显示其结果都很容易:

const 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",
    },
  ],
};

const List = props => Object.entries(props.data).map(([date, items]) => (
      <div key={date}>
          <strong>{date}</strong><br/><br/>
          {
              items.map((content, index) => (
                  <span key={index}>
                      start: {content.start}<br/>
                      end: {content.end}<br/>
                      user: {content.user}<br/><br/>
                  </span>
              ))
          }
      </div>
  ));

ReactDOM.render(
  <List data={data} />,
  document.getElementById('example')
);

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.8.6/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.8.6/umd/react-dom.production.min.js"></script>

<div id="example"></div>