在Ionic 2中对JSON数组按t_id分组并求和val1的方法

没问题，这事儿不难！我们可以用JavaScript的数组原生方法结合Ionic 2（基于Angular 2）的组件逻辑来轻松实现。下面是具体步骤和代码示例：

1. 核心分组求和逻辑 #

首先，我们用Array.reduce()方法来完成分组和累加操作，这个方法能高效遍历数组并构建我们需要的分组结果。

先看你的原始数据：

const rawData = [
  {t_id :"1", val1 : "1" , title:"cash to purchase", unit :"bag"},
  {t_id :"1" ,val1 : "1" , title:"cash to purchase", unit :"bag"},
  {t_id :"1",val1 : "1" , title:"cash to purchase", unit :"bag"},
  {t_id :"2",val1 : "4" , title:"offload", unit :"bag"},
  {t_id :"2",val1 : "5" , title:"onroad", unit :"bag"},
  {t_id :"3", val1 : "5" , title:"Onroad", unit :"bag"},
  {t_id :"3", val1 : "6" , title:"Onroad", unit :"bag"}
];

然后编写分组求和的函数：

groupAndSumByTid(data) {
  // 用reduce遍历数组，构建分组对象
  const grouped = data.reduce((acc, item) => {
    // 把val1转成数字，避免字符串拼接错误
    const value = Number(item.val1);
    // 如果当前t_id还没在分组里，初始化一个条目
    if (!acc[item.t_id]) {
      acc[item.t_id] = {
        t_id: item.t_id,
        title: item.title, // 取当前组第一个元素的title，可按需调整
        unit: item.unit,
        totalVal1: 0
      };
    }
    // 累加当前元素的val1到对应分组的总和里
    acc[item.t_id].totalVal1 += value;
    return acc;
  }, {});

  // 把对象转成数组，方便在Angular模板里用*ngFor遍历
  return Object.values(grouped);
}

2. 在Ionic 2组件中集成 #

在你的页面组件（比如home.page.ts）里，把逻辑整合进去：

import { Component } from '@angular/core';

@Component({
  selector: 'app-home',
  templateUrl: 'home.page.html',
  styleUrls: ['home.page.scss'],
})
export class HomePage {
  rawData = [
    {t_id :"1", val1 : "1" , title:"cash to purchase", unit :"bag"},
    {t_id :"1" ,val1 : "1" , title:"cash to purchase", unit :"bag"},
    {t_id :"1",val1 : "1" , title:"cash to purchase", unit :"bag"},
    {t_id :"2",val1 : "4" , title:"offload", unit :"bag"},
    {t_id :"2",val1 : "5" , title:"onroad", unit :"bag"},
    {t_id :"3", val1 : "5" , title:"Onroad", unit :"bag"},
    {t_id :"3", val1 : "6" , title:"Onroad", unit :"bag"}
  ];
  groupedData: any[];

  constructor() {
    // 页面初始化时计算分组求和结果
    this.groupedData = this.groupAndSumByTid(this.rawData);
  }

  groupAndSumByTid(data: any[]) {
    const grouped = data.reduce((acc, item) => {
      const value = Number(item.val1);
      if (!acc[item.t_id]) {
        acc[item.t_id] = {
          t_id: item.t_id,
          title: item.title,
          unit: item.unit,
          totalVal1: 0
        };
      }
      acc[item.t_id].totalVal1 += value;
      return acc;
    }, {});
    return Object.values(grouped);
  }
}

3. 在模板中渲染结果 #

在对应的HTML模板（home.page.html）里，用Angular的*ngFor展示分组后的结果：

<ion-content class="ion-padding">
  <ion-list>
    <ion-item *ngFor="let group of groupedData">
      <ion-label>
        <h2>ID: {{ group.t_id }}</h2>
        <p>{{ group.title }}</p>
        <p>Total: {{ group.totalVal1 }} {{ group.unit }}</p>
      </ion-label>
    </ion-item>
  </ion-list>
</ion-content>

关键注意点 #

• 因为你的val1是字符串类型，必须转成数字再累加，不然会出现"1"+"1"="11"的拼接错误。
• 如果同一t_id下的title或unit存在不一致的情况，你可以根据需求调整逻辑，比如收集所有不同值或者统一处理，上面示例默认取第一个元素的title和unit。

内容的提问来源于stack exchange，提问作者Arjun Ramdas