正文 

当前位置： 首页 > 知识 >

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

     2023-03-13     54

关键词：

【中文标题】如何从 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&lt;U&gt;(callbackfn: (previousValue: U, currentValue: T, currentIndex: number, array: T[]) =&gt; 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 上的那个）。

【讨论】：

使用 angular2/typescript 从 html 生成 PDF 文件

】使用angular2/typescript从html生成PDF文件【英文标题】：GeneratePDFfilefromhtmlusingangular2/typescript【发布时间】：2016-12-2402:18:45【问题描述】：我想提取我的HTML模板的一部分并将其转换为PDF文件，以便用户可以选择下载它。（例如，在... 查看详情

Typescript - 如何在 Angular2 中正确使用 jsPDF？

】Typescript-如何在Angular2中正确使用jsPDF？【英文标题】：Typescript-howtocorrectlyusejsPDFinAngular2?【发布时间】：2016-11-2505:52:33【问题描述】：我创建了一个生成JSON数据的Angular2应用程序。我想将此JSON输出保存到文件中，最好是PDF文件... 查看详情

如何在 Angular2 Typescript 中返回多个值

】如何在Angular2Typescript中返回多个值【英文标题】：HowdoIreturnmultiplevaluesinAngular2Typescript【发布时间】：2017-12-2305:10:16【问题描述】：在md-table中实现过滤器和分页功能时，我试图在typescript中返回多个值。当我运行代码时，我收... 查看详情

使用 Angular2、angularfire2 和 Typescript 从 Firebase 对象中获取数据

】使用Angular2、angularfire2和Typescript从Firebase对象中获取数据【英文标题】：GettingDataoutofFirebaseObjectwithAngular2,angularfire2andTypescript【发布时间】：2016-11-1013:45:02【问题描述】：我目前正在使用Angular2和angularFire2进行项目。我的数据库... 查看详情

渲染所有组件后，如何在 Angular2 中运行 TypeScript 代码？

】渲染所有组件后，如何在Angular2中运行TypeScript代码？【英文标题】：HowtorunTypeScriptcodeinAngular2afterallcomponentshavebeenrendered?【发布时间】：2017-03-1611:52:38【问题描述】：我在我的angular2应用程序中创建了2个简单的组件，分别称为In... 查看详情

如何在 Visual Studio Code 中调试 Angular2 TypeScript 应用程序？

】如何在VisualStudioCode中调试Angular2TypeScript应用程序？【英文标题】：HowtodebuganAngular2TypeScriptapplicationinVisualStudioCode?【发布时间】：2016-04-0120:52:16【问题描述】：如何在VisualStudioCode中成功配置和调试Angular2TypeScript应用程序？我也... 查看详情

Typescript 中如何编译装饰器（注解）？

】Typescript中如何编译装饰器（注解）？【英文标题】：Howaredecorators(annotations)compiledinTypescript?【发布时间】：2016-04-2713:32:15【问题描述】：在Angular2中，我可以创建一个组件，如下所示：importComponent,Templatefrom\'angular2/angular2\'@Compo... 查看详情

Angular2，Typescript：如何在每页显示一个元素的数组中检查单选按钮？

】Angular2，Typescript：如何在每页显示一个元素的数组中检查单选按钮？【英文标题】：Angular2,Typescript:Howtoputtheradiobuttoncheckedwheninanarraywhichdisplaysoneelementperpage?【发布时间】：2017-11-1108:30:59【问题描述】：让我详细解释一下。对不... 查看详情

在 Angular2 中访问 Typescript 对象变量

】在Angular2中访问Typescript对象变量【英文标题】：AccessTypescriptObjectVariablesinAngular2【发布时间】：2016-07-2816:14:15【问题描述】：如何显示下面Hero对象的ID和标题？下面的Hero接口是根据FirebaseJSON响应映射的。hero.component.tsimportCompone... 查看详情

如何将 jQuery 导入 Angular2 TypeScript 项目？

】如何将jQuery导入Angular2TypeScript项目？【英文标题】：HowtoimportjQuerytoAngular2TypeScriptprojects?【发布时间】：2017-01-2312:28:47【问题描述】：我想在Angular2指令中包装一些jQuery代码。我使用以下命令将用于Typings的jQuery库安装到我的项... 查看详情

如何正确地将函数传递给 Angular2/Typescript 中的自定义指令？

】如何正确地将函数传递给Angular2/Typescript中的自定义指令？【英文标题】：HowDoesOneProperlyPassFunctionstoCustomDirectivesinAngular2/Typescript?【发布时间】：2018-10-2314:18:12【问题描述】：我对Angular2还很陌生。我正在从AngularJS升级我的应用... 查看详情

Angular 2、TypeScript 和 ui-router - 如何获取状态参数

】Angular2、TypeScript和ui-router-如何获取状态参数【英文标题】：Angular2,TypeScript&ui-router-Howtogetstateparams【发布时间】：2016-12-0214:04:45【问题描述】：大家好，我想知道如何使用Angular2、TypeScript和ui-router从状态中获取状态参数。我... 查看详情

在 Angular2 中使用 Typescript 读取 JSON

】在Angular2中使用Typescript读取JSON【英文标题】：ReadingJSONusingTypescriptinAngular2【发布时间】：2016-06-1203:47:42【问题描述】：在对Firebase进行POST之后，我从Firebase返回了这个"name":"-KBfn7iFNIxSuCL9B-g5"如何使用Typescript读取POST请求返回的... 查看详情

Angular2-Webpack-Typescript - 3rd 方库

】Angular2-Webpack-Typescript-3rd方库【英文标题】：Angular2-Webpack-Typescript-3rdpartylibraries【发布时间】：2016-06-0820:39:06【问题描述】：我从一个漂亮的种子项目开始：https://github.com/AngularClass/angular2-webpack-starter我一直坚持使用3rd-party模块... 查看详情

如何在 Angular 2 / Typescript 中声明全局变量？ [关闭]

】如何在Angular2/Typescript中声明全局变量？[关闭]【英文标题】：HowcanIdeclareaglobalvariableinAngular2/Typescript?[closed]【发布时间】：2016-07-0914:28:53【问题描述】：我希望在Angular2中以Typescript语言在任何地方都可以访问一些变量。我应该... 查看详情

如何在 Angular 2 的 TypeScript 中映射嵌套的 Json

】如何在Angular2的TypeScript中映射嵌套的Json【英文标题】：HowtomapthenestedJsoninTypeScriptinAngular2【发布时间】：2017-09-2315:15:44【问题描述】：我无法在Angular2的TypeScript中映射嵌套的json。.我的Json结构是这样的："templateId":5,"sectionsList":[... 查看详情

如何使用 TypeScript 在我的 Angular 2 组件中声明模型类？

】如何使用TypeScript在我的Angular2组件中声明模型类？【英文标题】：HowdoIdeclareamodelclassinmyAngular2componentusingTypeScript?【发布时间】：2016-11-1819:51:21【问题描述】：我是Angular2和TypeScript的新手，我正在努力遵循最佳实践。我尝试创... 查看详情

在 Angular2 TypeScript 中注释（出）代码

】在Angular2TypeScript中注释（出）代码【英文标题】：Commenting(out)codeinAngular2TypeScript【发布时间】：2016-07-2315:31:49【问题描述】：我有以下Angular2TypeScript代码，其中一部分按照Javascript约定被注释掉：@Component(selector:\'my-app\',template:`... 查看详情