2つにマップされるlodashチャンク

Question

私は一連のデータを持っていて、そのテーブルを作成したいと思っています。 は、このAPI

[ 
    { 
    date: "1/11", 
    data: [ 
     { 
     camera: "camera 1", 
     count: 10 
     }, 
     { 
     camera: "camera 2", 
     count: 20 
     }, 
     { 
     camera: "camera 3", 
     count: 30 
     } 
    ] 
    } 
] 

からのデータは、この私のJXSある

<table className="tg"> 
     <tr> 
     <th /> 
     {Object.values(data[0].data).map((o, i) => <th>{o.camera}</th>)} 
     </tr> 
     {data.map((o, i) => { 
     return (
      <tr> 
      <td>{o.date}</td> 
      {o.data.map(o2 => <td>{o2.count}</td>)} 
      </tr> 
     ); 
     })} 
    </table> 

デモはここhttps://codesandbox.io/s/pm8qm68onq

見ることができているが、問題は、複数のカメラがあるでしょうです！それは20台のカメラには合わないので、データセットに18台のカメラがあれば、別の10台のカメラをどのように分割できますか？カメラが10以上の場合は別のテーブルを作成したいので、最初の10台のカメラが最初のテーブルにあり、2台目のテーブルに8台のカメラが含まれています。

Answer 1

あなたはそれぞれの日付を調べ、新しい配列を作成できます該当する表

let newData = []; 

for (const dateObj of data) { 
    let chunkedData = []; 
    while (dateObj.data.length > 0) 
    chunkedData.push(dateObj.data.splice(0, 2)); 
    for (const [index, chunk] of chunkedData.entries()) { 
    newData[index] = newData[index] || []; 
    newData[index].push({ 
     date: dateObj.date, 
     data: chunk 
    }) 
    } 
} 

JSXのテーブルをループすることができます。

私はテーブルごとに2台のカメラの最大を使用してこれを行うには、あなたのデモを更新した

<div> 
    {newData.map((table, i) => { 
    return (
     <table className="tg"> 
     <tr> 
      <th /> 
      {Object.values(table[0].data).map((o, i) => <th>{o.camera}</th>)} 
     </tr> 
     {table.map((o, i) => { 
      return (
      <tr> 
       <td>{o.date}</td> 
       {o.data.map(o2 => <td>{o2.count}</td>)} 
       </tr> 
      ); 
      })} 
     </table> 
    ); 
    }) 
    } 
</div> 

... https://codesandbox.io/s/jn4w32v759

Answer 2

あなたはその後で別のテーブルを作成し、各チャンクのためのレンダリングrender

sliceIntoChunks = (data, chunkSize) => { 
    let chunks = []; 
    for (let i=0; i<data.length; i+=chunkSize) { 
     chunks.push(data.slice(i,i+chunkSize)); 
    } 

    return chunks; 
} 

前チャンクにあなたのデータをスライスしようとすることができます：ここで

chunks.map(chunk => (
    <table> 
     // and map through chunk to fill current table 
     chank.map(camera => (...)) 
    </table> 
)) 

---

は実施例である：https://jsfiddle.net/csr6zsbo/