Реакция - Как добавить динамические данные в таблицу из двух неравномерных массивов - PullRequest
Новая
       62

Реакция - Как добавить динамические данные в таблицу из двух неравномерных массивов

0 голосов
/ 21 марта 2019

У меня есть два неравных массива, и я хочу, чтобы эти два массива были помещены в таблицу.Я попытался следующие шаги.

Мой первый массив, как это.Этот массив данных также динамический.Иногда это имеет 5, но в следующий раз это будет 6 или 7. Это зависит.

var firstArray = [ "2019/01/01","2019/01/02","2019/01/03","2019/01/04","2019/01/05"]

Это мой второй массив.Он содержит некоторую информацию, связанную с firstArray 

var secondArray = [{RoomId:"RID1",Date:"2019/01/02","BookingID":"#111","BookingType":"ChannelManager","Status":0},{RoomId:"RID2",Date:"2019/01/01","BookingID":"#112","BookingType":"WalkIn","Status":1},{RoomId:"RID2",Date:"2019/01/04","BookingID":"#113","BookingType":"ChannelManager","Status":2}]

. Как видите, иногда во втором массиве не все даты указаны в firstArray.Поэтому мне нужна таблица, подобная следующей.

См. Это изображение

Я попытался выполнить следующие шаги. 

<Table>
           <tbody>

           <tr>
           {this.state.isLoading ? <Loader active /> :
                this.state.firstArray.map(function(item, i){
                  return (
                      <td>
                    {item}
                  </td>                       
                  )
                })
                } 
            </tr>
            {/* data table row */}
            <tr>
           {this.state.isLoading ? <Loader active /> :
                this.state.secoundArray.map((item) => (
                  <td> {this.mappingFunction.call(this, item)} </td>
               ))
                } 
            </tr>
            </tbody> 
            </Table>

Как видите, япопытался отправить secondArray в функцию с именем mappingFunction и визуализировать BookingID в соответствии с датой, но это также невозможно.Может кто-то помочь мне с этим.Большое спасибо!

Ответы [ 2 ]

0 голосов
/ 21 марта 2019

Я перестраиваю данные перед рендерингом таблицы с reduce и Map

function App() {
  var firstArray = [
    "2019/01/01",
    "2019/01/02",
    "2019/01/03",
    "2019/01/04",
    "2019/01/05"
  ];
  var secondArray = [
    { RoomId: "RID1", Date: "2019/01/02", BookingID: "#111" },
    { RoomId: "RID2", Date: "2019/01/01", BookingID: "#112" },
    { RoomId: "RID2", Date: "2019/01/04", BookingID: "#113" }
  ];

  const rebuild = secondArray.reduce((acc, { RoomId, Date, BookingID }) => {
      const idx = firstArray.indexOf(Date);
      if (acc.has(RoomId)) acc.set(RoomId, {...acc.get(RoomId), [idx]: BookingID});
      else acc.set(RoomId, {[idx]: BookingID});
      return acc;
    },new Map());

  const renderCells = (cellData) =>
    firstArray.map((e, index) => {
      const tmp = Object.keys(cellData).indexOf(index.toString()) === -1 ? "" : cellData[index];
      return <td>{tmp}</td>;
    });

  return (
    <table>
      <tr>
        <td>Room Name</td>
        {firstArray.map(e => (
          <td>{e}</td>
        ))}
      </tr>
      {[...rebuild].map(([RoomId, cellData]) => {
        return (
          <tr>
            <td>{RoomId}</td>
            {renderCells(cellData)}
          </tr>
        );
      })}
    </table>
  );
}

const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement);
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>
<div id="root"></id>
0 голосов
/ 21 марта 2019

Я думаю, ты почти у цели.Мышление правильное, но вы просто не реализовали это правильно.Как насчет этого? 

return (
  <Table>
    <tbody>
      {this.state.isLoading ? <Loader active /> : firstArray.map(item1 => {
        const valueExistsInBothArrays = secondArray.find(
          item2 => item2.Date === item1
        );
        if (valueExistsInBothArrays) {
          return (
            <tr>
              <td>{valueExistsInBothArrays.Date}</td>
              <td>{valueExistsInBothArrays.RoomId}</td>
              <td>{valueExistsInBothArrays.BookingID}</td>
            </tr>
          );
        }
      })}
    </tbody>
  </Table>
);
...