javascript - 如何比较数组中的每个元素并将具有相同数据的元素分组（在我的情况下为日期）？JavaScript

Question

const patientDetails = [
 {patientName: "A", dateReg: "2019-11-12", room: "room1", user: "k" },
 {patientName: "B", dateReg: "2019-11-12", room: "room8", user: "k" },
 {patientName: "C", dateReg: "2019-11-12", room: "room2", user: "k" },
 {patientName: "D", dateReg: "2019-11-12", room: "room5", user: "k" },
 {patientName: "E", dateReg: "2019-11-12", room: "room6", user: "k" },
 {patientName: "F", dateReg: "2019-11-11", room: "room10", user: "k" },
 {patientName: "G", dateReg: "2019-11-11", room: "room18", user: "k" }
]

我有一个包含患者详细信息的数组。我想要做的是，如果患者的 dateReg 相同，那么我想基本上将它们分组。在 UI 中，我想先渲染一行日期（2019-11-12），然后接下来的行将填充具有相同日期（2019-11-12）的患者详细信息，直到有另一个患者日期不同（2019-11-11）。如果有不同的日期，我想用新日期 (2019-11-11) 添加一个新行，然后将具有这些日期 (2019-11-11) 的患者详细信息呈现到不同的日期，依此类推。 ..

我无法让它发挥作用，也不完全确定我的方向是否正确。

我试过了

const dateCheck = patientDetails[0].dateReg; 

date.map(patient => {
  if(patient.dateReg === dateCheck){
    return (

        <tr>
          <td>{patient.dateReg}</td>
        </tr>
        <tr>
          <td>{paitent.patientName} </td>
          <td>{patient.room}</td>
          <td>{patient.user}</td>
        <tr>

    )
  }else {
    return(
     <tr>
          <td>{patient.dateReg}</td>
        </tr>
        <tr>
          <td>{paitent.patientName} </td>
          <td>{patient.room}</td>
          <td>{patient.user}</td>
        <tr>
    )
  }
})

标签： javascriptarraysreactjsindexing

Answer 1

对数组数据进行分组的基本方法是使用array.prototype.reduce. 您可以使用array.prototype.sort. 这是没有 UI 的本质：

const patientDetails = [
 {patientName: "A", dateReg: "2019-11-12", room: "room1", user: "k" },
 {patientName: "B", dateReg: "2019-11-12", room: "room8", user: "k" },
 {patientName: "C", dateReg: "2019-11-12", room: "room2", user: "k" },
 {patientName: "D", dateReg: "2019-11-12", room: "room5", user: "k" },
 {patientName: "E", dateReg: "2019-11-12", room: "room6", user: "k" },
 {patientName: "F", dateReg: "2019-11-11", room: "room10", user: "k" },
 {patientName: "G", dateReg: "2019-11-11", room: "room18", user: "k" }
];

let grouped = patientDetails.reduce((g, d) => {
  g[d.dateReg] = g[d.dateReg] || [];
  g[d.dateReg].push(d);
  return g;
}, {});

let sorted = Object.values(grouped).sort(([a], [b]) => a.dateReg > b.dateReg);

sorted.forEach(s => {
  console.log(`===${s[0].dateReg}===`);
  s.forEach(ss => console.log(`${ss.patientName} ${ss.room} ${ss.user}`));
  console.log();
});