javascript - 创建按列分组的矩阵表

Question

我有一个要求，我需要列出特定区域内运行的所有项目。所有项目都应添加为表中的列。项目数量可能会增加，因此需要动态创建具有动态列的表。此外，该表应以两列开头，其中包括有关每个项目应重复的类别和区域的信息。我们还需要按状态对项目进行分组。所以我们需要对列进行分组。我不知道下面的JSON结构是否准确满足要求，或者我们是否需要更改它

我有与此类似的 JSON，

[{
  "category": "a",
  "region": "Region 1",
  projects: [{
    "project": "A",
    "resources" : 2,
    "status": green
  }, {
    "project": "B", 
    "resources" : 2,
    "status": green
  }, {
    "project": "C",
    "resources" : 2,
    "status": green
  }]
}, {
  "category": "b",
  "region": "Region 2",
  projects: [{
    "project": "F",
    "resources" : 2,
    "status": red
  }, {
    "project": "A",
    "resources" : 4,
    "status": green
  }]
}]

是否可以动态创建按状态列分组的表。 或者我们应该从服务器端处理此类表的创建。 该表应与此类似，

<table>
  <tr>
    <th rowspan="2">Category</th>
    <th rowspan="2">Region</th>
    <th colspan="4">Green</th>
    <th colspan="3">Red</th>
  </tr>
  <tr>
    <th>A</th>
    <th>B</th>
    <th>C</th>
    <th>D</th>
    <th>E</th>
    <th>F</th>
    <th>G</th>
  </tr>
  <tr>
    <td>A</td>
    <td>Region 1</td>
    <td>2</td>
    <td>2</td>
    <td>2</td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
  </tr>
  <tr>
    <td>B</td>
    <td>Region 2</td>
    <td>4</td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td>2</td>
    <td></td>
  </tr>
  </table>

我想知道是否可以使用上述 JSON 结构通过 jQuery 动态实现这一点，或者我们是否需要修改 JSON 结构。

Answer 1

您可以使用 JavaScript 中的函数来执行此操作，例如

"use strict";

function groupBy(array, selectKey) {
  return array.reduce((groups, element) => {
      const key = selectKey(element);
      if (groups[key]) {
        groups[key].push(element);
      } 
      else {
        groups[key] = [element];
      }

      return groups;
    }, {});
}

这会将数组投影到一个对象中，该对象具有从数组中的对象投影的每个不同键的属性。每个属性的值将是在我们传递的任何 selectKey 函数下生成该键的值的数组。

注意:selectKey 应返回一个字符串或数字，无论如何，其结果将被强制转换为字符串。

现在，给定您的数组，我们可以将其分组。

让我们首先按类别分组:

"use strict";

function groupBy(array, selectKey) {
  return array.reduce((groups, element) => {
      const key = selectKey(element);
      if (groups[key]) {
        groups[key].push(element);
      } 
      else {
        groups[key] = [element];
      }
      
      return groups;
    }, {});
}

const xs = [{
  "category": "a",
  "region": "Region 1",
  projects: [{
    "project": "A",
    "resources": 2,
    "status": 'green'
  }, {
    "project": "B",
    "resources": 2,
    "status": 'green'
  }, {
    "project": "C",
    "resources": 2,
    "status": 'green'
  }]
}, {
  "category": "b",
  "region": "Region 2",
  projects: [{
    "project": "F",
    "resources": 2,
    "status": 'red'
  }, {
    "project": "A",
    "resources": 4,
    "status": 'green'
  }]
}];

const byCategory = groupBy(xs, x => x.category);

console.log(byCategory);

现在，如果我们需要按多列分组怎么办？我们可以用逻辑来增强 groupBy 以采用自定义比较函数，但我们可以通过使用字符串连接来作弊。

在以下示例中，我们按类别和按区域分组:

"use strict";

function groupBy(array, selectKey) {
  return array.reduce((groups, element) => {
      const key = selectKey(element);
      if (groups[key]) {
        groups[key].push(element);
      } 
      else {
        groups[key] = [element];
      }
      
      return groups;
    }, {});
}

const xs = [{
  "category": "a",
  "region": "Region 1",
  projects: [{
    "project": "A",
    "resources": 2,
    "status": 'green'
  }, {
    "project": "B",
    "resources": 2,
    "status": 'green'
  }, {
    "project": "C",
    "resources": 2,
    "status": 'green'
  }]
}, {
  "category": "b",
  "region": "Region 2",
  projects: [{
    "project": "F",
    "resources": 2,
    "status": 'red'
  }, {
    "project": "A",
    "resources": 4,
    "status": 'green'
  }]
}];

const byCategoryAndRegion = groupBy(
    xs,
    x => `category: ${x.category}, region: ${x.region}`
  );

console.log(byCategoryAndRegion);

我并不完全清楚您的数据的结构和方向，但这应该足以让您继续下去。