如何将数据排列成行和列？

Question

我已经使用我的地图函数迭代数据并将其打印出来。但是我无法将它分成行和列。应该有 5 列是固定的，行是动态变化的，这就是我不能使用数组索引的原因。

我附上可重现的代码 - Link

let array = [
    [
        72.3474349975586,
        83.77342224121094,
        83.77342224121094,
        72.3474349975586,
        97.0778579711914
    ],
    [
        80.1422348022461,
        93.16133117675781,
        93.16133117675781,
        80.1422348022461,
        108.54068756103516
    ],
    [
        108.37809753417969,
        125.22685241699219,
        125.22685241699219,
        108.37809753417969,
        147.92010498046875
    ],
    [
        163.5850372314453,
        197.7432098388672,
        197.7432098388672,
        163.5850372314453,
        228.80577087402344
    ],
    [
        198.08128356933594,
        236.1764678955078,
        236.1764678955078,
        198.08128356933594,
        276.9237060546875
    ],
    [
        126.81776428222656,
        147.2906951904297,
        147.2906951904297,
        126.81776428222656,
        174.1883544921875
    ],
    [
        95.24028778076172,
        110.93660736083984,
        110.93660736083984,
        95.24028778076172,
        129.43946838378906
    ],
    [
        95.24028015136719,
        110.93661499023438,
        110.93661499023438,
        95.24028015136719,
        129.43946838378906
    ],
    [
        126.8177719116211,
        147.2906951904297,
        147.2906951904297,
        126.8177719116211,
        174.1883544921875
    ],
    [
        198.081298828125,
        236.176513671875,
        236.176513671875,
        198.081298828125,
        276.9237060546875
    ],
    [
        163.5850372314453,
        197.74327087402344,
        197.74327087402344,
        163.5850372314453,
        228.80577087402344
    ],
    [
        108.37812042236328,
        125.22686767578125,
        125.22686767578125,
        108.37812042236328,
        147.92013549804688
    ],
    [
        80.1422348022461,
        93.16131591796875,
        93.16131591796875,
        80.1422348022461,
        108.54067993164062
    ],
    [
        72.347412109375,
        83.77342987060547,
        83.77342987060547,
        72.347412109375,
        97.07785034179688
    ],
    [
        80.1422348022461,
        93.16131591796875,
        93.16131591796875,
        80.1422348022461,
        108.54067993164062
    ],
    [
        108.37812042236328,
        125.22686767578125,
        125.22686767578125,
        108.37812042236328,
        147.92013549804688
    ],
    [
        108.37809753417969,
        125.22685241699219,
        125.22685241699219,
        108.37809753417969,
        147.92010498046875
    ],
    [
        80.1422348022461,
        93.16133117675781,
        93.16133117675781,
        80.1422348022461,
        108.54068756103516
    ]
]

var num = array.map(function(subarray){
  return subarray
  })


for(i=0;i<num.length;i++){
  for(j=0;j<5;j++){
    console.log(num[i][j])
  }
}

我得到的输出如图所示

但我需要这样的东西，但有 5 列和行根据 RestApi 动态变化。

[注意：图像和代码中的值可能会有所变化，因为它们仅供参考。我从 RestApi 获取值，因此它们会不断变化。

Answer 1

这是一个空的（5x5 单元格）table 的样子：

<table>
  <tr>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
  </tr>
  <tr>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
  </tr>
  <tr>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
  </tr>
 <tr>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
  </tr>
  <tr>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
  </tr>
</table>

因此您需要一个组件生成一行 td，另一个组件生成一行 tr。然后根据需要生成任意数量的行。

Answer 2

这是你需要的吗？

let array = [
  [
    72.3474349975586,
    83.77342224121094,
    83.77342224121094,
    72.3474349975586,
    97.0778579711914
  ],
  [
    80.1422348022461,
    93.16133117675781,
    93.16133117675781,
    80.1422348022461,
    108.54068756103516
  ],
  [
    108.37809753417969,
    125.22685241699219,
    125.22685241699219,
    108.37809753417969,
    147.92010498046875
  ],
  [
    163.5850372314453,
    197.7432098388672,
    197.7432098388672,
    163.5850372314453,
    228.80577087402344
  ],
  [
    198.08128356933594,
    236.1764678955078,
    236.1764678955078,
    198.08128356933594,
    276.9237060546875
  ],
  [
    126.81776428222656,
    147.2906951904297,
    147.2906951904297,
    126.81776428222656,
    174.1883544921875
  ],
  [
    95.24028778076172,
    110.93660736083984,
    110.93660736083984,
    95.24028778076172,
    129.43946838378906
  ],
  [
    95.24028015136719,
    110.93661499023438,
    110.93661499023438,
    95.24028015136719,
    129.43946838378906
  ],
  [
    126.8177719116211,
    147.2906951904297,
    147.2906951904297,
    126.8177719116211,
    174.1883544921875
  ],
  [
    198.081298828125,
    236.176513671875,
    236.176513671875,
    198.081298828125,
    276.9237060546875
  ],
  [
    163.5850372314453,
    197.74327087402344,
    197.74327087402344,
    163.5850372314453,
    228.80577087402344
  ],
  [
    108.37812042236328,
    125.22686767578125,
    125.22686767578125,
    108.37812042236328,
    147.92013549804688
  ],
  [
    80.1422348022461,
    93.16131591796875,
    93.16131591796875,
    80.1422348022461,
    108.54067993164062
  ],
  [
    72.347412109375,
    83.77342987060547,
    83.77342987060547,
    72.347412109375,
    97.07785034179688
  ],
  [
    80.1422348022461,
    93.16131591796875,
    93.16131591796875,
    80.1422348022461,
    108.54067993164062
  ],
  [
    108.37812042236328,
    125.22686767578125,
    125.22686767578125,
    108.37812042236328,
    147.92013549804688
  ],
  [
    108.37809753417969,
    125.22685241699219,
    125.22685241699219,
    108.37809753417969,
    147.92010498046875
  ],
  [
    80.1422348022461,
    93.16133117675781,
    93.16133117675781,
    80.1422348022461,
    108.54068756103516
  ]
]

var num = array.map(function(subarray) {
  return subarray
})


for (i = 0; i < num.length; i++) {
  let rowNumbers = '';
  for (j = 0; j < 5; j++) {
    if (rowNumbers) {
      rowNumbers += ', ';
    }
    rowNumbers += num[i][j];
  }
  console.log(rowNumbers)
}

Answer 3

或许你可以这样做；

var array = [
    [
        72.3474349975586,
        83.77342224121094,
        83.77342224121094,
        72.3474349975586,
        97.0778579711914
    ],
    [
        80.1422348022461,
        93.16133117675781,
        93.16133117675781,
        80.1422348022461,
        108.54068756103516
    ],
    [
        108.37809753417969,
        125.22685241699219,
        125.22685241699219,
        108.37809753417969,
        147.92010498046875
    ],
    [
        163.5850372314453,
        197.7432098388672,
        197.7432098388672,
        163.5850372314453,
        228.80577087402344
    ],
    [
        198.08128356933594,
        236.1764678955078,
        236.1764678955078,
        198.08128356933594,
        276.9237060546875
    ],
    [
        126.81776428222656,
        147.2906951904297,
        147.2906951904297,
        126.81776428222656,
        174.1883544921875
    ],
    [
        95.24028778076172,
        110.93660736083984,
        110.93660736083984,
        95.24028778076172,
        129.43946838378906
    ],
    [
        95.24028015136719,
        110.93661499023438,
        110.93661499023438,
        95.24028015136719,
        129.43946838378906
    ],
    [
        126.8177719116211,
        147.2906951904297,
        147.2906951904297,
        126.8177719116211,
        174.1883544921875
    ],
    [
        198.081298828125,
        236.176513671875,
        236.176513671875,
        198.081298828125,
        276.9237060546875
    ],
    [
        163.5850372314453,
        197.74327087402344,
        197.74327087402344,
        163.5850372314453,
        228.80577087402344
    ],
    [
        108.37812042236328,
        125.22686767578125,
        125.22686767578125,
        108.37812042236328,
        147.92013549804688
    ],
    [
        80.1422348022461,
        93.16131591796875,
        93.16131591796875,
        80.1422348022461,
        108.54067993164062
    ],
    [
        72.347412109375,
        83.77342987060547,
        83.77342987060547,
        72.347412109375,
        97.07785034179688
    ],
    [
        80.1422348022461,
        93.16131591796875,
        93.16131591796875,
        80.1422348022461,
        108.54067993164062
    ],
    [
        108.37812042236328,
        125.22686767578125,
        125.22686767578125,
        108.37812042236328,
        147.92013549804688
    ],
    [
        108.37809753417969,
        125.22685241699219,
        125.22685241699219,
        108.37809753417969,
        147.92010498046875
    ],
    [
        80.1422348022461,
        93.16133117675781,
        93.16133117675781,
        80.1422348022461,
        108.54068756103516
    ]
];
   table = function(a){
             var cols = row => row.map(c => `<td>${c.toFixed(4)}</td>`).join(""),
                 rows = tbl => tbl.map(r => `<tr>${cols(r)}</tr>`).join("");
             return `<table><tbody>${rows(a)}</tbody></table>`;
           }
document.write(table(array));

td { border: 1px solid red;
     text-align: right
   }

如何将数据排列成行和列？

How to arrage the data as rows and columns?

html

javascript

css

reactjs

tailwind-css