如何从 Angular2（Typescript）中的 Json 数组中获取值的总和

Posted 2023-03-13

【中文标题】如何从 Angular2（Typescript）中的 Json 数组中获取值的总和

【英文标题】：How to get sum of value from Json Array in Angular2(Typescript)

【发布时间】：2018-01-31 16:00:42

【问题描述】：

我有一个 Json 响应

"carts": 
            "value": [
                

                    "Amt": 40

                ,
                
                    "Amt": 20.25

                ,
                

                    "Amt": 10.30

                

            ]
        

我想得到 Amt 字段的总和值，输出应该是 70.55 如何使用 Typescript 获得这个。我是 typescript 的新手。 谁能帮我解决这个问题？

【参考方案1】：

let sum = 0;
    for (var i = 0; i < this.carts.value.length; i++) 
        sum+= this.carts.value[i].Amt;
    

【参考方案2】：

你可以使用 observable reduce。 如果你有 Http 响应，那么：

this.http.get('url')
    .map(response.carts.value)
    .map(res => res.Amt)
    .reduce((a, b) => a + b)
    .subscribe(res => console.log(res))

【参考方案3】：

你可以这样写一个函数：

public cartTotal(): number 

    let total: number = 0;

    this.carts.value.forEach((e:any) => 
        total = total + Number(e.Amt);
    );

    return total;

【讨论】：

这行不通，因为e 将是一个对象。此外，如果您希望 e 成为数字，最好将其键入注释为数字，而不是任何数字。这样，如果你提供一个对象，至少会出现编译器错误（这是你使用 TypeScript 的一个方面）。

【参考方案4】：

这是实现它的基本方法。

  sum=0;
  for(let a of json.carts.value)
      sum=sum+a.Amt;
  

【参考方案5】：

我非常赞成Rxjs' Observable answer，但是因为没有人提到它：javascript 数组有一个reduce 函数，所以也可以在 Typescript 中使用它！ p>

// suppose variable carts already stores the deserialized json
let total: number = carts.value.reduce( 
  (a: number, b) => a + b.Amt, 0);

@Stefan 的 cmets 之后：

修正错误 & 最好不要分配 b 的类型，以便从上下文中推断出来，并可能在编译时引发 Typescript 错误。

【讨论】：

这是行不通的，因为value 中的项目以及您的b 和您的初始值（您的第一个a）都是对象。

@Stefan 你是对的，并且忘记了'0'初始值。编辑。

补充一点：我不会输入 annotate a 和 b 并让 TypeScript 推断类型。否则，例如，如果 value 中的对象不包含任何 Amt 值，则使用 any 作为类型隐藏结果错误。

你能详细说明一下吗？我认为any 是实际的“默认值”，如果没有指明（并且没有使用类型保护或类似的东西）。 （没有 noImplicitAny 选项，这是默认选项）

自动推断分配类型（例如let x = 0;）。如果函数定义包含回调参数的定义，也会自动推断这些参数（例如，reduce 的相关定义为 reduce<U>(callbackfn: (previousValue: U, currentValue: T, currentIndex: number, array: T[]) => U, initialValue: U): U;）。 typescriptlang.org/docs/handbook/type-inference.html 包含有关此的有用信息。

【参考方案6】：

使用 JavaScript 的 reduce 函数（也适用于 TypeScript）的正确方法是：

const response = 
  "carts": 
    "value": [
      
        "Amt": 40
      ,
      
        "Amt": 20.25
      ,
      
        "Amt": 10.30
      
    ]
  
;

const total = response.carts.value.reduce((sum, item) => sum + item.Amt, 0);

console.log(total);

请注意，如果您想支持 IE8，则必须包含一个 polyfill（如 MDN's page 上的那个）。