React transform data using reduce

Question

I need to transform the following structure using React.

export const bodyRows = [
  {
    row: [{ cell: "Name" }, { cell: "Allan, Trent" }, { cell: "Smith, Nathan" }, { cell: "Howard, Greg" }],
  },
  {
    row: [{ cell: "Student ID" }, { cell: 332 }, { cell: 333 }, { cell: 334 }, { cell: 335 }, { cell: 356 }],
  },
  {
    row: [{ cell: "Studkey" }, { cell: "333-B" }, { cell: "334-B" }, { cell: "335-B" }, { cell: "336-B" }, { cell: "332-B" }],
  },
  {
    row: [{ cell: "Name" }, { cell: "Smith, Trent" }, { cell: "Ryan, Nathan" }, { cell: "Johnson, Greg" }],
  },
  {
    row: [{ cell: "Student ID" }, { cell: 232 }, { cell: 233 }, { cell: 234 }, { cell: 235 }, { cell: 256 }],
  },
  {
    row: [{ cell: "Studkey" }, { cell: "233-B" }, { cell: "234-B" }, { cell: "235-B" }, { cell: "236-B" }, { cell: "232-B" }],
  },
  {
    row: [{ cell: "Name" }, { cell: "Lewis, Trent" }, { cell: "Roberts, Nathan" }, { cell: "Roberts, Greg" }],
  },
  {
    row: [{ cell: "Student ID" }, { cell: 132 }, { cell: 133 }, { cell: 134 }, { cell: 135 }, { cell: 156 }],
  },
  {
    row: [{ cell: "Studkey" }, { cell: "133-B" }, { cell: "134-B" }, { cell: "135-B" }, { cell: "136-B" }, { cell: "132-B" }],
  },
];

I have the following and I can't get it working correctly. Could anyone please recommend how to solve this?

const bodyRows = studentHistory.map((students) => ({
    row: [{ cell: "Name" }, { cell: students.studentName }],
    row: [{ cell: "Student ID" }, { cell: students.studentId }],
    row: [{ cell: "Studkey" }, { cell: students.studentHistoryId }],
  }));

Output example:

I've updated my original post of the expected outcome. If there's multiple records, how can I achieve this? — RyRyWilli
– RyRyWilli, Commented Nov 28, 2024 at 3:20
Could you share the exact body structure to produce that output ? — Yuvaraj M
– Yuvaraj M, Commented Nov 28, 2024 at 4:40

Yuvaraj M · Accepted Answer · 2024-11-28 06:15:28Z

For that you need to use Array.reduce method.

const studentHistory_1 = [
  {
    studentName: "Allan, Trent",
    studentId: 332,
    studentHistoryId: "333-B"
  },
  {
    studentName: "Allan-2",
    studentId: 331,
    studentHistoryId: "333-c"
  },
  {
    studentName: "Huge",
    studentId: 3321,
    studentHistoryId: "333-s"
  },
  {
    studentName: "Jackman",
    studentId: 3211,
    studentHistoryId: "333-g"
  }
];

const studentHistory_2 = [
  {
    studentName: "Allan, Trent",
    studentId: 232,
    studentHistoryId: "232-B"
  },
  {
    studentName: "Allan-2",
    studentId: 233,
    studentHistoryId: "233-c"
  },
  {
    studentName: "Huge",
    studentId: 234,
    studentHistoryId: "234-s"
  },
  {
    studentName: "Jackman",
    studentId: 235,
    studentHistoryId: "235-g"
  }
];

const studentHistory_3 = [
  {
    studentName: "Allan, Trent",
    studentId: 132,
    studentHistoryId: "132-B"
  },
  {
    studentName: "Allan-2",
    studentId: 133,
    studentHistoryId: "133-c"
  },
  {
    studentName: "Huge",
    studentId: 134,
    studentHistoryId: "134-s"
  },
  {
    studentName: "Jackman",
    studentId: 135,
    studentHistoryId: "135-g"
  }
];

const bodyRowsGenerate = studentHistory => {
  return studentHistory.reduce((body, student) => {
    const { studentId, studentName, studentHistoryId} = student;
    student.studentName && body[0].row.push({
      cell : studentName
    }); // For name row
    
     student.studentId && body[1].row.push({
      cell : studentId
    }); // For id row
    
     student.studentName && body[2].row.push({
      cell : studentHistoryId
    }); // For key row
    
    return body;
  },[
    {
      row: [{ cell: "Name" }]
    },
    {
      row: [{ cell: "Student ID" }]
    }, 
    {
      row: [{ cell: "Studkey" }]
    }
  ]);
}

const bodyRows = [
  ...bodyRowsGenerate(studentHistory_1),
  ...bodyRowsGenerate(studentHistory_2),
  ...bodyRowsGenerate(studentHistory_3),
];

console.dir(bodyRows)

Thiwain Medagama · Accepted Answer · 2024-11-28 06:25:07Z

0

I see you're trying to transform your data into a table, but I think there's a bit of confusion with your code:

You're overwriting the row property in your .map() function, so only the last row will show up. Were you trying to have multiple rows in the same object?
Also, could you clarify how you want the table structured? From the example image, it looks like you want the data to display horizontally with 'Name', 'Student ID', and 'Studkey' as the headers, but I just want to be sure I'm on the right track.

Once I have a bit more context, I'll try to help you out with the solution

answered Nov 28, 2024 at 6:25

Thiwain Medagama

211 bronze badge

Collectives™ on Stack Overflow

React transform data using reduce

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related