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?
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) }) })
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>
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.
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.