javascript groupby key并在表格中打印

JavaScript中的groupBy函数用于根据指定的键对数组进行分组。它将数组中具有相同键的元素归类到一个新的对象中。以下是一个示例代码：

function groupBy(arr, key) {
  return arr.reduce((acc, obj) => {
    const groupKey = obj[key];
    if (!acc[groupKey]) {
      acc[groupKey] = [];
    }
    acc[groupKey].push(obj);
    return acc;
  }, {});
}

const data = [
  { name: 'Alice', age: 25, city: 'New York' },
  { name: 'Bob', age: 30, city: 'London' },
  { name: 'Charlie', age: 35, city: 'New York' },
  { name: 'Dave', age: 40, city: 'London' },
];

const groupedData = groupBy(data, 'city');
console.log(groupedData);

上述代码将根据city键将数据分组，并将结果打印到控制台。输出结果如下：

{
  'New York': [
    { name: 'Alice', age: 25, city: 'New York' },
    { name: 'Charlie', age: 35, city: 'New York' }
  ],
  'London': [
    { name: 'Bob', age: 30, city: 'London' },
    { name: 'Dave', age: 40, city: 'London' }
  ]
}

这个函数非常有用，特别是在需要对数据进行分组和聚合的情况下，例如统计每个城市的人数或计算每个城市的平均年龄等。

在表格中打印分组后的数据，可以使用HTML和JavaScript来实现。以下是一个简单的示例：

<!DOCTYPE html>
<html>
<head>
  <title>GroupBy Example</title>
  <style>
    table {
      border-collapse: collapse;
    }
    th, td {
      border: 1px solid black;
      padding: 5px;
    }
  </style>
</head>
<body>
  <table id="groupedTable">
    <thead>
      <tr>
        <th>City</th>
        <th>Name</th>
        <th>Age</th>
      </tr>
    </thead>
    <tbody>
    </tbody>
  </table>

  <script>
    function groupBy(arr, key) {
      return arr.reduce((acc, obj) => {
        const groupKey = obj[key];
        if (!acc[groupKey]) {
          acc[groupKey] = [];
        }
        acc[groupKey].push(obj);
        return acc;
      }, {});
    }

    const data = [
      { name: 'Alice', age: 25, city: 'New York' },
      { name: 'Bob', age: 30, city: 'London' },
      { name: 'Charlie', age: 35, city: 'New York' },
      { name: 'Dave', age: 40, city: 'London' },
    ];

    const groupedData = groupBy(data, 'city');
    const tableBody = document.querySelector('#groupedTable tbody');

    for (const city in groupedData) {
      const cityData = groupedData[city];
      cityData.forEach((obj) => {
        const row = document.createElement('tr');
        const cityCell = document.createElement('td');
        const nameCell = document.createElement('td');
        const ageCell = document.createElement('td');

        cityCell.textContent = city;
        nameCell.textContent = obj.name;
        ageCell.textContent = obj.age;

        row.appendChild(cityCell);
        row.appendChild(nameCell);
        row.appendChild(ageCell);

        tableBody.appendChild(row);
      });
    }
  </script>
</body>
</html>

上述代码将根据city键将数据分组，并将分组后的数据打印到表格中。每个分组的城市名称只在第一行显示，后续行为空。输出结果如下：

City       Name     Age
New York   Alice    25
           Charlie  35
London     Bob      30
           Dave     40

这个示例使用了HTML的表格元素和JavaScript的DOM操作来动态创建表格行和单元格，并将数据填充到相应的单元格中。

javascript groupby key并在表格中打印

、

下面显示的是json响应以及打印表格的javascript函数。{ "2" }, "sex": "F"} 用于打印表的javascript函数 var studies = JSON.parse(

浏览 32提问于2021-05-17得票数 0

回答已采纳

2回答

根据用户选择的纸张大小打印适合大小的html表格

、、

我有一个html表，并在网页上给出了打印选项，在那里用户能够在A4上打印默认。当用户单击打印时，我使用javascript打印功能打印它，它工作得很好，结果是一个适合整个A4页面大小的表格，但是现在我的用户希望当他们在属性中更改纸张大小时，从A4到A3，相同的表格变成横向，表格，行，列的大小可以调整，它将适合A3表格的整个页面

浏览 1提问于2013-10-22得票数 0

2回答

React groupBy并打印到表格中

、、、

编辑:方法groupBy、omit和mapValue从以下位置导入： import groupBy from 'lodash/groupBy'; "order": false{ "orderNumber": "6", "order": f

浏览 58提问于2019-05-30得票数 0

回答已采纳

4回答

打印时不要重复TFOOT

、、

扩展到多个打印页面的表格将在firefox中重新打印其thead和tfoot部分。这通常很棒，但是，有没有办法用CSS来关闭这种行为呢？更新，感谢你到目前为止的回复。我希望tfoot在表格的底部有一次，但不是在每一页的末尾。再次感谢。

浏览 0提问于2009-01-23得票数 16

回答已采纳

2回答

在Python中使用render_template时，如何更改表的样式？

、、、

我正在用烧瓶、html和css制作一个网站，我用熊猫来读取csv文件，做一些计算，并在我的html中给我一个表格。我怎样才能改变桌子的样式？另外，我怎样才能并排打印桌子？这是烧瓶的钻头def about(): data = data.groupby('attempts', ascending=Fa

浏览 1提问于2021-06-02得票数 0

回答已采纳

1回答

angularJS按键排序列表

如何在打印表格时实现按升序或降序mainSubjectAllocationList & optionSubjectAllocationList键排序。3rd lang German, Life Skill", } <tbody ng-repeat="(key, value) in vm.sectionListWithClass | groupBy: &#

浏览 0提问于2016-01-07得票数 0

4回答

计算重复数并将它们合并到列表中

、

所需的输出应该如下所示：b (1)我已经拥有的代码如下所示： list.GroupBy(x => x).Select(x => x.Key + "(" + x.Count()

浏览 8提问于2022-03-16得票数 0

1回答

我有一个应用程序，它基于一个带有选择选项的简单表单过滤掉DB中的对象，在表单中的每一次更改都会从服务器获得一个包含过滤对象的列表。我从来没有提交过这样的表格。你是如何保持表格保持原样的？<div ng-repeat="(key, value) in tags.tags.objects | groupBy:'category.name'"><label class="item item-input item-select

浏览 3提问于2014-09-18得票数 1

回答已采纳

1回答

、、、、

在我的应用程序中，我有一个类似于银行账户的东西:一个User有一个Account，信用条目被建模为Incomings，扣减被建模为Outgoings。) __tablename__ = 'incoming' __tablename__ = 'outgoing' id = Column(Int

浏览 0提问于2019-08-31得票数 5

1回答

itertools/ groupby/ for循环

、

目标行位于下面显示的代码中(if (key == group[0][0]):)。我尝试实现的想法如下：如果满足上述条件，则必须在循环for group in groups的每一轮中进行检查。因此，在打印完第一组中的所有项之后，for循环将跳到下一组并执行相同的操作(在检出第二个条件if (key == item[0]):之后)。因此，重点是防止for循环跳到下一组，因为键和每个项的第一个元素之间没有匹配，这意味着在那里将找不到或打印不到任何元素。说到这里，我会避免跳到任何其他有另一个密

浏览 2提问于2021-07-10得票数 1

2回答