Question 368839 in Javascript Question posted in
A very good W3school tutorial can be found here.

Javascript – Render data based on month array in React js

I have a response from api like below. I want to render month wise data in a div in react js. For example for MARCH month it should only show MARCH month data and for APRIL and MAY it should show respective months data in a div. It should be dynamic.

const arr =  [
    {
        MARCH: [
            {
                "iD": "67854",
                "event": " closed",
                "title": "test",
                "startDate": "2024-06-20",
                "endDate": "2024-07-25"
            }
        ]
    },
    {
        APRIL: [
            {
                "ID": "908765",
                "event": "closed",
                "title": "test",
                "startDate": "2024-05-21",
                "endDate": "2024-06-27"
            },
            {
                ID: "12345",
                event: "open",
                title: "test123",
                startDate: "2024-05-21",
                endDate: "2024-06-27"
            }
        ]
    },
    {
        MAY: [
            {
                "ID": "908765",
                "event": "closed",
                "title": "test",
                "startDate": "2024-05-21",
                "endDate": "2024-06-27"
            },
            {
                ID: "12345",
                event: "open",
                title: "test123",
                startDate: "2024-05-21",
                endDate: "2024-06-27"
            },
            {
                ID: "12345",
                event: "open",
                title: "test123",
                startDate: "2024-05-21",
                endDate: "2024-06-27"
            }
        ]
    }
]

output in UI :

MARCH

event – closed
title – test
startDate – 2024-06-20
endDate -2024-07-25

APRIL

event – closed
title – test
startDate – 2024-05-21
endDate – 2024-06-27

event – open
title – test123
startDate – 2024-05-21
endDate – 2024-06-27

MAY

event – closed
title – test
startDate – 2024-05-21
endDate – 2024-06-27

event – open
title – test123
startDate – 2024-05-21
endDate – 2024-06-27

event – open
title – test123
startDate – 2024-05-21
endDate – 2024-06-27

How can I achieve this. Could someone suggest. I tried with es6 map. but it didn’t git the expected output.

Tags:

2

Answers


  1. 0

    you could use array mapping and getting the keys from the array/dict data like below, note code is not tested (using javascript jsx formated code)

    {
    arr.map(a => {
        const keys = Object.keys(a);
        const firstkey = keys[0];
        return  <>
            <h4>{firstkey}</h4>
            <ul>{
                a[firstkey].map( b => { return
                <li key={`${b['ID']}`}>{ `event - ${b['event']} title - ${b['title']} startDate - ${b['startDate']} endDate - ${b['endDate']}` }</li>
                })
            }</ul>
        </>
    })
}
    Login or Signup to reply.
  2. 0

    You’ll need two nested maps, and a way to extract the month/data combination from the first array, like:

    export default function App() {
  return (
    <>
      {data
        .map((entry) => Object.entries(entry)[0])
        .map(([month, events]) => (
          <MonthView id={month} month={month} events={events} />
        ))}
    </>
  );
}

function MonthView({ month, events }) {
  return (
    <article>
      <h2>{month}</h2>
      <ul>
        {events.map(({ ID, title }) => (
          <li key={ID}>{title}</li>
        ))}
      </ul>
    </article>
  );
}
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search