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

Javascript – Map function not returning all the arrays

So here I am trying to map through multiple arrays, and return all the data related to it. But only the first array is getting returned.
The strange thing here is that when I try console logging the same its working just fine. but the moment I put it inside any HTML tag the problem is coming up. What is wrong here? Any kinda help will be very useful.

function getHoveredEventDetails() {
  const formattedDay = day.format("DD-MM-YYYY");
  const matchingDates = [];

  eventsCountandDate.forEach((event) => {
    if (event.date === formattedDay) {
      matchingDates.push(event);
    }
  });
  let countKey = 1010;
  if (matchingDates.length > 0) {
    return matchingDates.map((event, index) => {
      const coursesDetails = event.courses;
      countKey = countKey + 1;
      return coursesDetails.map((course, courseIndex) => {
        return (
          <div className="eventDetails" key={`${index}-${courseIndex}`}>
            <div className="profile">
              <h1 className="profile_title">{course.courseName}</h1>
              <p className="profile_para">
                On {course.startProgramDates} till {course.endProgramDates},
                From {course.startTime} to {course.endTime}
              </p>
            </div>
          </div>
        );
      });
    });
  }
}

Here is the API data, which I am trying to get.

courseCount: 3, courses: (3) [{…}, {…}, {…}], date:"14-02-2024"

Further If I expland the courses array then

courses: Array(3)
1:{courseName: 'Course 1', startProgramDates: '14-02-2024', endProgramDates: '16-02-2024', startTime: '8:00 AM ET', endTime: '13:00 PM ET'}
1:{courseName: 'Course 2', startProgramDates: '12-02-2024', endProgramDates: '16-02-2024', startTime: '11:00 AM ET', endTime: '12:00 AM ET'}
2:{courseName: 'Course 3', startProgramDates: '13-02-2024', endProgramDates: '16-02-2024', startTime: '10:00 PM ET', endTime: '11:00 AM ET'}
Tags:

2

Answers


  1. 0

    You’re returning an array-of-arrays. You’re not telling us what it is you exactly want to return, but given you’ve tagged react.js, presumably a flat list of divs; in that case, use flatMap:

    return matchingDates.flatMap((event, index) => {
   ...

    Your component further simplifies to something like

    function getHoveredEventDetails() {
  const formattedDay = day.format("DD-MM-YYYY");
  const matchingDates = eventsCountandDate.filter(
    (event) => event.date === formattedDay,
  );
  return matchingDates.flatMap((event, dateIndex) =>
    event.courses.map((course, courseIndex) => (
      <div className="eventDetails" key={`${dateIndex}-${courseIndex}`}>
        <div className="profile">
          <h1 className="profile_title">{course.courseName}</h1>
          <p className="profile_para">
            On {course.startProgramDates} till {course.endProgramDates}, From{" "}
            {course.startTime} to {course.endTime}
          </p>
        </div>
      </div>
    )),
  );
}
    Login or Signup to reply.
  2. 0

    I think It is weird. Mybe it might works:

    function getHoveredEventDetails() {
  const formattedDay = day.format("DD-MM-YYYY");
  const matchingDates = [];

  eventsCountandDate.forEach((event) => {
    if (event.date === formattedDay) {
      matchingDates.push(event);
    }
  });
  let countKey = 1010;
  if (matchingDates.length > 0) {
     matchingDates.forEach((event, index) => {
      const coursesDetails = event.courses;
      countKey = countKey + 1;
      coursesDetails.forEach((course, courseIndex) => {
        return (
          <div className="eventDetails" key={`${index}-${courseIndex}`}>
            <div className="profile">
              <h1 className="profile_title">{course.courseName}</h1>
              <p className="profile_para">
                On {course.startProgramDates} till {course.endProgramDates},
                From {course.startTime} to {course.endTime}
              </p>
            </div>
          </div>
        );
      });
    });
  }
}
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search