두 개의 맵으로 바뀌는 lodash 청크

Question

데이터 세트가있어서 그것을위한 테이블을 만들고 싶습니다. 이이 내 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

를 볼 수 있습니다 이다 API

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

에서 데이터하지만 문제는 이상의 카메라가있을 것입니다! 20 대의 카메라를 장착 할 수 없으므로 데이터 세트에 18 대의 카메라가 있다면 다른 10 대의 카메라를 어떻게 분리 할 수 ​​있습니까? 카메라가 10 개 이상인 경우 다른 테이블을 만들고 싶으므로 처음 10 개의 카메라가 첫 번째 테이블에 있고 두 번째 테이블에 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/