Reactjs Question posted in
The new location for the React Documentation can be found here.

Reactjs – React transform data using reduce

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:
enter image description here

Tags:

2

Answers


  1. 0

    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)
    Login or Signup to reply.
  2. 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:

    1. 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?

    2. 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

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search