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

【问题标题】：How to get sum of value from Json Array in Angular2(Typescript)如何从 Angular2（Typescript）中的 Json 数组中获取值的总和
【发布时间】：2018-01-31 16:00:42
【问题描述】：

我有一个 Json 响应

"carts": {
            "value": [
                {

                    "Amt": 40

                },
                {
                    "Amt": 20.25

                },
                {

                    "Amt": 10.30

                }

            ]
        }

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

【问题讨论】：

标签： arrays json angular 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 上的那个）。

【讨论】：