从对象数组生成表

Question

好的，所以我有一系列看起来像这样的对象

{id: 1, color: "red", size: "S", free: 14, location: "Location #1"}
{id: 2, color: "green", size: "M", free: 5, location: "Location #1"}
{id: 3, color: "red", size: "M", free: 3, location: "Location #2"}
{id: 4, color: "green", size: "L", free: 12, location: "Location #1"}
{id: 5, color: "green", size: "S", free: 5, location: "Location #2"}
{id: 6, color: "red", size: "L", free: 0, location: "Location #1"}
{id: 7, color: "blue", size: "L", free: 0, location: "Location #2"}
{id: 8, color: "blue", size: "M", free: 0, location: "Location #1"}
{id: 9, color: "blue", size: "S", free: 0, location: "Location #1"}
{id: 10, color: "purple", size: "L", free: 0, location: "Location #2"}

我希望能够生成一个看起来像这样的表

我想我必须过滤或分组一些键值对或类似的东西，但是我不知道正确的方法。

再次可能对于此特定表，我必须执行以下操作：

{
  color: 'red',
  location: 'Location #1',
  sizes: [
    {
      s: 12
    },
    {
      m: 5
    },
    {
      l: 7
    }
  ]
}

{
  color: 'green',
  location: 'Location #1',
  sizes: [
    {
      s: 3
    },
    {
      m: 11
    },
    {
      l: 4
    }
  ]
}

但是，然后我必须弄清楚如何用此数据填充HTML表本身。 也许有一些图书馆或其他可以帮助我做到这一点的东西。 谢谢！

Answer 1

您可以构建一棵树并收集数据集中的所有值。 结果是一棵树，其中的键是location ， color和size值。 在叶子上，您可以获得free的累积值。

然后，您可以使用累积值为表构建一个数组。

 function getTable(object) { function getRows(object, row = []) { if (row.length === 2) { table.push(row.concat(['S', 'M', 'L'].map(k => object[k] || 0))); return; } Object.entries(object).forEach(([k, v]) => getRows(v, row.concat(k))); } var table = []; getRows(object); return table; } var data = [{ id: 1, color: "red", size: "S", free: 14, location: "Location #1" }, { id: 2, color: "green", size: "M", free: 5, location: "Location #1" }, { id: 3, color: "red", size: "M", free: 3, location: "Location #2" }, { id: 4, color: "green", size: "L", free: 12, location: "Location #1" }, { id: 5, color: "green", size: "S", free: 5, location: "Location #2" }, { id: 6, color: "red", size: "L", free: 0, location: "Location #1" }, { id: 7, color: "blue", size: "L", free: 0, location: "Location #2" }, { id: 8, color: "blue", size: "M", free: 0, location: "Location #1" }, { id: 9, color: "blue", size: "S", free: 0, location: "Location #1" }, { id: 10, color: "purple", size: "L", free: 0, location: "Location #2" }], tree = data.reduce((r, o) => { var q = ['location', 'color'].reduce((p, k) => p[o[k]] = p[o[k]] || {}, r); q[o.size] = (q[o.size] || 0) + o.free; return r; }, {}), table = getTable(tree); console.log(tree); console.log(table); 

 .as-console-wrapper { max-height: 100% !important; top: 0; } 

Answer 2

请参阅最后生成的表

您可以使用reduce来累积每种颜色和每个位置的大小。 这是使用reduce和结果树的示例方法。

const tree = data.reduce((accum, { id, color, size, free, location }) => {
  accum[location] = accum[location] || { };
  accum[location][color] = accum[location][color] || { S: 0, M: 0, L: 0 };
  accum[location][color][size] += free;
  return accum;
}, {});

{
  "Location #1": {
    "red": {
      "S": 14,
      "M": 0,
      "L": 0
    },
    "green": {
      "S": 0,
      "M": 5,
      "L": 12
    },
    "blue": {
      "S": 0,
      "M": 0,
      "L": 0
    }
  },
  "Location #2": {
    "red": {
      "S": 0,
      "M": 3,
      "L": 0
    },
    "green": {
      "S": 5,
      "M": 0,
      "L": 0
    },
    "blue": {
      "S": 0,
      "M": 0,
      "L": 0
    },
    "purple": {
      "S": 0,
      "M": 0,
      "L": 0
    }
  }
}

要创建表，您可以遍历位置条目，并针对每个位置遍历颜色，然后将行附加到表中。

您可以通过克隆从DOM查询的行模板来创建每一行，然后将该行附加到表主体中：

 const data = [ {id: 1, color: "red", size: "S", free: 14, location: "Location #1"}, {id: 2, color: "green", size: "M", free: 5, location: "Location #1"}, {id: 3, color: "red", size: "M", free: 3, location: "Location #2"}, {id: 4, color: "green", size: "L", free: 12, location: "Location #1"}, {id: 5, color: "green", size: "S", free: 5, location: "Location #2"}, {id: 6, color: "red", size: "L", free: 0, location: "Location #1"}, {id: 7, color: "blue", size: "L", free: 0, location: "Location #2"}, {id: 8, color: "blue", size: "M", free: 0, location: "Location #1"}, {id: 9, color: "blue", size: "S", free: 0, location: "Location #1"}, {id: 10, color: "purple", size: "L", free: 0, location: "Location #2"} ]; const tree = data.reduce((accum, { id, color, size, free, location }) => { accum[location] = accum[location] || { }; accum[location][color] = accum[location][color] || { S: 0, M: 0, L: 0 }; accum[location][color][size] += free; return accum; }, {}); const tpl = document.querySelector('#row-template'); const tbody = document.querySelector("tbody"); Object.entries(tree).forEach(([location, values]) => { Object.entries(values).forEach(([color, sizes]) => { const clone = document.importNode(tpl.content, true); const td = clone.querySelectorAll("td"); td[0].textContent = location; td[1].textContent = color; td[2].textContent = sizes['S']; td[3].textContent = sizes['M']; td[4].textContent = sizes['L']; tbody.appendChild(clone); }); }); 

 table { border-collapse: collapse; } thead { font-weight: bold; } td { padding: 5px; border: 1px solid black; } 

 <template id="row-template"> <tr> <td></td> <td></td> <td></td> <td></td> <td></td> </tr> </template> <table id="data-table"> <thead> <tr> <td>Location</td><td>color</td><td>S</td><td>M</td><td>L</td> </tr> </thead> <tbody> </tbody> </table>