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

Posted 2023-03-07

技术标签:

【中文标题】如何将数据排列为行和列？【英文标题】：How to arrage the data as rows and columns? 【发布时间】：2022-01-15 23:16:55 【问题描述】：

我已经使用我的 map 函数来迭代数据并将其打印出来。但我无法将其分隔为行和列。应该有 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 获取值，因此它们会不断变化。

【问题讨论】：

预期输出是什么？ 【参考方案1】：

也许你可以这样做；

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

【讨论】：

我希望它在 reactjs @Redu 中工作【参考方案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)

【讨论】：

【参考方案3】：

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

<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。然后生成任意数量的行。

【讨论】：

以上是关于如何将数据排列为行和列？的主要内容，如果未能解决你的问题，请参考以下文章

如何通过单击pyqt5中的按钮来制作qlineedit的动态行和列？

如何在行和列中排列对象并在.svg中导出[关闭]