javascript根据标题数量将数组复制到新数组中

Question

将此表提取到数组中

$(function() {
  var $table = $("#results"),
    $headerCells = $table.find("thead th"),
    $rowCells = $table.find("tbody tr td");

  var headers = [],
    rows = [],
    combined = [];

  $headerCells.each(function(k, v) {
    headers[headers.length] = $(this).text();
  });

  $rowCells.each(function(k, v) {
    rows[rows.length] = $(this).text();
  });


  console.log(headers);
  console.log(rows);
  console.log($headerCells.length);
  console.log($rowCells.length);

  for (var i = 0; i < $rowCells.length; i++) {
    for (var j = 0; j < $headerCells.length; j++) {
      combined.push([$($headerCells[j]).text(), $($rowCells[i]).text()]);
    }
  }

  console.log(combined);
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table id="results">
  <thead>
    <tr>
      <th>User Name</th>
      <th>User Job</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>fred nerk</td>
      <td>Admin</td>
    </tr>
    <tr>
      <td>Site Admin</td>
      <td>Dude</td>
    </tr>
    <tr>
      <td>User</td>
      <td>slave</td>
    </tr>
    <tr>
      <td>Admin</td>
      <td>god</td>
    </tr>
    <tr>
      <td>Specialist</td>
      <td>thing</td>
    </tr>
  </tbody>
</table>

标头数量未知

可以帮助， 标头给我

["User Name", "User Job"]

行给我

["fred nerk", "Admin", "Site Admin", "Dude", "User", "slave", "Admin", "god", "Specialist", "thing"]

如果我尝试合并这些数组，我会得到类似

["User Name", "fred nerk"] ["User Job", "fred nerk"] ["User Name", "Admin"] ["User Job", "Admin"] ["User Name", "Site Admin"] ["User Job", "Site Admin"] ["User Name", "Dude"] ["User Job", "Dude"] ["User Name", "User"] ["User Job", "User"] ["User Name", "slave"] ["User Job", "slave"] ["User Name", "Admin"] ["User Job", "Admin"] ["User Name", "god"] ["User Job", "god"] ["User Name", "Specialist"] ["User Job", "Specialist"] ["User Name", "thing"] ["User Job", "thing"]

如您所见，这不太正确，我需要改为对数组进行数组操作。

[{"User Name": "fred nerk","User Job", "Admin"}...]...

有人可以帮忙吗？我不是一个真正的JS人员，所以这对我来说是一个艰巨的挑战：）

Answer 1

当您在行上循环时，只需创建json对象。

考虑以下示例：

let headers = ["name", "job"];
let rows = ["fred nerk", "Admin","Site Admin", "Dude"];
let res = [];

function chunkArrayInGroups(arr, size) {
    let res = [];
    for(var i = 0; i < arr.length; i += size) {
        res.push(arr.slice(i, i+size));
    }
    return res;
}

rows = chunkArrayInGroups(rows, headers.length);

for (var i = 0; i < rows.length; i++) {
        let obj = {}; //for each rows create a JSON object
        for (var j = 0; j < headers.length; j++)
                obj[headers[j]] = rows[i][j];
        res.push(obj); // add object to result array
}

Answer 2

一旦将chunked的主数组放入想要的片段，您就可以简单地将Array.reduce与Array.map一起使用，以得到非常简洁的结果：

let headers = ["name", "job", "awesome"];
let rows = ["John Smith", "Boss", true, "fred nerk", "Admin", false, "Site Admin", "Dude", false];

const chunkBy = (a,by=2) => a.reduce((r,c,i) => (i%by==0 ? r.push([c]) : r[r.length-1] = [...r[r.length-1], c], r), [])

let f = chunkBy(rows,3).map(x => x.reduce((r,c,i) => (r[headers[i]] = c,r), {}))

console.log(f)

这也适用于未知的标头，只要数据与标头匹配-3个标头-数组中的3个道具等。

Answer 3

这应该做

// GET table headers
let header = $('#results').find('thead tr').children();
// Table body rows
let tableRow = $('#results').find('tbody').children();

let arr = [];
$.each(tableRow, function(i, tr){
    let obj = {};
    $.each(header, function(x, th){
        obj[$(th).html()] = $($(tr).children()[x]).html();
    });
    arr.push(obj);
});
console.log(arr);