How to display a JSON with different keys in React?

user_12302627 0
Viewed 380

I have an input JSON shown below:

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”
        }
    ]
}

I want to display the JSON in the below format in React:

The challenge I am facing here is since the JSON contains multiple keys with different dates, I am not able to perform a map on the object. Can someone suggest how to do display the above JSON in the table/list format as shown in the image?

reactjs iteration javascript
3 Answers

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

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

user_66551600

I think that your issue is more related to the conversion from an object to an array, to be able to iterate on it. There are multiple ways to do that:

1 - You can use Object.entries() as @hgb123 recommended you:

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

2 - You can get the keys of the object using Object.keys(), as @Gandzal recommended you, and iterate on the returned array:

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 - Or you can use Array.prototype.reduce() on the array returned by 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);

Whatever method you choose, iterate on an array, and display its results is easy after the conversion:

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>

user_20353540

See CodeSandbox with basic example with no styling.

data is an object with key:value pairs. The key is the date you require at the top of the schedule, where the value of that key is the information (end/start/user)

An option is to use the Object.keys() function to iterate over your data object and map a Schedule component, thereby rendering your data.

const ScheduleList = (props) => {

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

and a simple use case

const App = () => {     

    return <ScheduleList data={data} />
}

the Schedule component will be responsible for the presentation of the data. The bold date will be available as props.date, and the end/start/user data will be available as props.dates in the Schedule component.

user_133283220
Related