how to map over an Object and render the arrays inside the object javascript/reactjs?

Question

const data = {
    "13/11/19": [
    {patientName: "A", room: "room1", user: "k"}, 
    {patientName: "A", room: "room1", user: "k"},
  ], 
    "12/11/19": [
    {patientName: "B", room: "room8", user: "p" }, 
    {patientName: "B", room: "room8", user: "p" },
  ]
}

I have got a data object which has 2 arrays. Inside the data object, I have grouped the array by dates. In the UI I would like to render a row with the date first(13/11/19) then the next rows would be filled with the paitent details (patientName: A) until there is another patient with a different date (12/11/19).

If there is a different date and I would want to add a new row with the new date (12/11/19) then render the patient details(patientName: B) until a different date and so on...

I got started with the following function but I haven't gotton any far from here. How can I render a table with date first and the patients array? thanks in advance.

Object.keys(data).map(obj => 
  console.log(obj) // gives me the date '13/11/19' & '12/11/19'

  console.log(data[obj].map(p => p)) //gives the both patient A & B

 )

UI should be 

Row 1 - 13/11/19 
Row 2 - patientName: "A", room: "room1", user: "k" 
Row 3 - patientName: "A", room: "room1", user: "k" 
Row 4 - 12/11/19 
Row 5 - patientName: "B", room: "room8", user: "p" 
Row 6 - patientName: "B", room: "room8", user: "p

Yes @ChrisG Row 1 - 13/11/19 Row 2 - patientName: "A", room: "room1", user: "k" Row 3 - patientName: "A", room: "room1", user: "k" Row 4 - 12/11/19 Row 5 - patientName: "B", room: "room8", user: "p" Row 6 - patientName: "B", room: "room8", user: "p" — Jereme
– Jereme, Commented Nov 14, 2019 at 13:44

no1lov3sme · Accepted Answer · 2019-11-14 13:53:53Z

3

Try this:

Object.entries(data).map(([date, patients]) => (
  <div key={date}>
    <h1>{date}</h1>
    <ul>
      {patients.map((patient, i) => (<li key={i}>Patient Name: {patient.patientName}</li>)}
    </ul>
  </div>
))

edited Nov 14, 2019 at 13:53

answered Nov 14, 2019 at 12:43

no1lov3sme

7321 gold badge5 silver badges14 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Jereme Over a year ago

patients.map isn't a function. patients argument is index. this doesn't work

Jereme Over a year ago

Thank you so much it worked. I get how it worked. but I didn't realise that you could achieve this with object.entries. specially the (([date, patients])) arguments is a new thing for me.

Collectives™ on Stack Overflow

how to map over an Object and render the arrays inside the object javascript/reactjs?

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related