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

如何解决如何在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”,{
            end: “2020-09-20T18:30:00Z”,start: “2020-09-20T10:30:00Z”,{
            end: “2020-09-21T02:30:00Z”,start: “2020-09-20T18:30:00Z”,user: “rahul”
        }
    ]
}

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

我在这里面临的挑战是，由于JSON包含多个具有不同日期的键，因此我无法对该对象执行map。有人可以建议如何以图片所示的表格/列表格式显示以上JSON吗？

解决方法

使用Object.entries()

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",{
      end: "2020-09-20T18:30:00Z",start: "2020-09-20T10:30:00Z",{
      end: "2020-09-21T02:30:00Z",start: "2020-09-20T18:30:00Z",}

Object.entries(data).forEach(([date,content]) => {
  console.log(date)
  content.forEach((c) => {
    console.log('\t',c.start,c.end,c.user)
  })
})

,

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

1-您可以按照{hgb123的建议使用Object.entries()：

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

2-您可以按照{Gandzal的建议，使用Object.keys()获取对象的键，并迭代返回的数组：

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

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

const myObject = { a: 1,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",};

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>

,

请参见CodeSandbox，其中包含没有样式的基本示例。

data是具有键：值对的对象。密钥是您在日程表顶部需要的日期，该密钥的值是信息（结束/开始/用户）

一种选择是使用Object.keys()函数来迭代data对象并映射Schedule组件，从而呈现数据。

const ScheduleList = (props) => {

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

和一个简单的用例

const App = () => {     

    return <ScheduleList data={data} />
}

Schedule组件将负责数据的表示。在Schedule组件中，粗体日期将用作props.date，结束/开始/用户数据将作为props.dates。