javascript - 从对象数组生成表

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

See the table generated at the end

您可以使用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>