Angular 如何在typescript中对多维对象中的数据求和？

我有以下代码：

import { HttpClient } from "@angular/common/http";
import { Component, OnInit } from "@angular/core";
import { FormBuilder, FormGroup, Validators } from "@angular/forms";
import { ActivatedRoute, Router } from "@angular/router";

@Component({
  styleUrls: ["./styles.scss"],
  templateUrl: "./template.html"
})
export class MyRouteData {
  MyDataObject: object;
  MyDataObjectTotals: object;

  constructor(private http: HttpClient) {}

  ngOnInit() {
    this.http
      .get("http://localhost:5000/MyRoute/GetMyData")
      .subscribe(response => {
        console.log(response);
        this.MyDataObject = response;
      });
  }
}

var QuantityPurchasedColumn = MyDataObject.map(a => a.QuantityPurchased);
var QuantityPurchasedTotal = QuantityPurchasedColumn.reduce(function(a, b) {return a + b;});

它在MyDataObject对象中存储以下数据：

{
  "Record1": {
    "CustomerName": "Obi Wan Kenobi",
    "TransactionDate": "2018-01-01",
    "IsNewCustomer": false,
    "ItemPuchased":"Speeder Polish 250ml",
    "QuantityPurchased":2,
    "SalesTotal":10.04
  },
  "Record2": {
    "CustomerName": "Darth Vader",
    "TransactionDate": "2018-01-02",
    "IsNewCustomer": false,
    "ItemPuchased":"Burn Cream 250ml",
    "QuantityPurchased":200000,
    "SalesTotal":7523840.84
  },
  "Record3": {
    "CustomerName": "Luke Skywalker",
    "TransactionDate": "2018-01-02",
    "IsNewCustomer": false,
    "ItemPuchased":"Power Converters",
    "QuantityPurchased":5,
    "SalesTotal":1324.02
  },
  "Record4": {
    "CustomerName": "Jabba the Hut",
    "TransactionDate": "2019-01-05",
    "IsNewCustomer": false,
    "ItemPuchased":"Dancing Slave Chick",
    "QuantityPurchased":1,
    "SalesTotal":150000.00
  }
}

请注意，GetMyData端点正在运行返回表的SQL查询。我刚刚在这里将数据表示为JSON，以便可以轻松查看。 SQL查询返回的列包括CustomerName、TransactionDate、IsNewCustomer、ItemPuchased、QuantityPurchased和SalesTotal

我想将每一列的总计（如果相关）存储到另一个对象（上面代码中的MyDataObjectTotals）中

我可以使用以下代码合计单个列：

import { HttpClient } from "@angular/common/http";
import { Component, OnInit } from "@angular/core";
import { FormBuilder, FormGroup, Validators } from "@angular/forms";
import { ActivatedRoute, Router } from "@angular/router";

@Component({
  styleUrls: ["./styles.scss"],
  templateUrl: "./template.html"
})
export class MyRouteData {
  MyDataObject: object;
  MyDataObjectTotals: object;

  constructor(private http: HttpClient) {}

  ngOnInit() {
    this.http
      .get("http://localhost:5000/MyRoute/GetMyData")
      .subscribe(response => {
        console.log(response);
        this.MyDataObject = response;
      });
  }
}

var QuantityPurchasedColumn = MyDataObject.map(a => a.QuantityPurchased);
var QuantityPurchasedTotal = QuantityPurchasedColumn.reduce(function(a, b) {return a + b;});

我是否可以编写一个通用方法，只给它一个对象（即MyDataObject），它将返回一个包含以下数据的对象（同样，不是JSON字符串，而是一个包含CustomerName、TransactionDate、IsNewCustomer、ItemPuchased、QuantityPurchased和SalesTotal列的对象）：

---

您是否尝试过JSON.Parse（myObject）方法？这将把你的JSON对象转换成JS对象。

你试过JSON.Parse（myObject）方法吗？这将把JSON对象转换成JS对象。

我可以想出两种不同的方法来解决这个问题。 1。迭代json键。

var myObj = {

  "Record1": {
    "CustomerName": "Obi Wan Kenobi",
    "TransactionDate": "2018-01-01",
    "IsNewCustomer": false,
    "ItemPuchased":"Speeder Polish 250ml",
    "QuantityPurchased":2,
    "SalesTotal":10.04
  },
    "Record2": {
    "CustomerName": "Oobi",
    "TransactionDate": "2018-01-01",
    "IsNewCustomer": false,
    "ItemPuchased":"Speeder Polish 250ml",
    "QuantityPurchased":2,
    "SalesTotal":10.04
  },
};

for (var values in myObj) {
  console.log(myObj[values]['QuantityPurchased']);
}

2。发送记录数组，而不是发送记录的json

var myObj: Records[] = [

   {
    "CustomerName": "Obi Wan Kenobi",
    "TransactionDate": "2018-01-01",
    "IsNewCustomer": false,
    "ItemPuchased":"Speeder Polish 250ml",
    "QuantityPurchased":2,
    "SalesTotal":10.04
  },
 {
    "CustomerName": "Oobi",
    "TransactionDate": "2018-01-01",
    "IsNewCustomer": false,
    "ItemPuchased":"Speeder Polish 250ml",
    "QuantityPurchased":2,
    "SalesTotal":10.04
  },
];

myObj.forEach(myRecord => {
  // Do w/e you like.
});

---

我可以想出两种不同的方法来解决这个问题。 1。迭代json键。

var myObj = {

  "Record1": {
    "CustomerName": "Obi Wan Kenobi",
    "TransactionDate": "2018-01-01",
    "IsNewCustomer": false,
    "ItemPuchased":"Speeder Polish 250ml",
    "QuantityPurchased":2,
    "SalesTotal":10.04
  },
    "Record2": {
    "CustomerName": "Oobi",
    "TransactionDate": "2018-01-01",
    "IsNewCustomer": false,
    "ItemPuchased":"Speeder Polish 250ml",
    "QuantityPurchased":2,
    "SalesTotal":10.04
  },
};

for (var values in myObj) {
  console.log(myObj[values]['QuantityPurchased']);
}

2。发送记录数组，而不是发送记录的json

var myObj: Records[] = [

   {
    "CustomerName": "Obi Wan Kenobi",
    "TransactionDate": "2018-01-01",
    "IsNewCustomer": false,
    "ItemPuchased":"Speeder Polish 250ml",
    "QuantityPurchased":2,
    "SalesTotal":10.04
  },
 {
    "CustomerName": "Oobi",
    "TransactionDate": "2018-01-01",
    "IsNewCustomer": false,
    "ItemPuchased":"Speeder Polish 250ml",
    "QuantityPurchased":2,
    "SalesTotal":10.04
  },
];

myObj.forEach(myRecord => {
  // Do w/e you like.
});

---

根据您成功使用

map

的陈述，我假设您打算将

MyDataObject

作为一个数组，而不是问题中所示的对象。您可以使用for-in循环迭代第一条记录的键，并检查每个键是要求和还是

null

var MyDataObject = [
  {
    "CustomerName": "Obi Wan Kenobi",
    "TransactionDate": "2018-01-01",
    "IsNewCustomer": false,
    "ItemPuchased": "Speeder Polish 250ml",
    "QuantityPurchased": 2,
    "SalesTotal": 10.04
  },
  {
    "CustomerName": "Darth Vader",
    "TransactionDate": "2018-01-02",
    "IsNewCustomer": false,
    "ItemPuchased": "Burn Cream 250ml",
    "QuantityPurchased": 200000,
    "SalesTotal": 7523840.84
  },
  {
    "CustomerName": "Luke Skywalker",
    "TransactionDate": "2018-01-02",
    "IsNewCustomer": false,
    "ItemPuchased": "Power Converters",
    "QuantityPurchased": 5,
    "SalesTotal": 1324.02
  },
  {
    "CustomerName": "Jabba the Hut",
    "TransactionDate": "2019-01-05",
    "IsNewCustomer": false,
    "ItemPuchased": "Dancing Slave Chick",
    "QuantityPurchased": 1,
    "SalesTotal": 150000.00
  }
];
type MyRecord = typeof MyDataObject[number];

var SumColumns: Partial<{ [K in keyof MyRecord]:
  MyRecord[K] extends number ? true : never }> = {
  "QuantityPurchased": true,
  "SalesTotal": true
};

var Sum = <{ [K in keyof MyRecord]: number | null }>{};
let columnName: keyof MyRecord;
for (columnName in MyDataObject[0]) { 
  Sum[columnName] = SumColumns[columnName]
    ? MyDataObject.map(a => <number>a[columnName]).reduce(function (a, b) { return a + b; })
    : null;
}

var MyDataObject=[
{
“客户名称”：“欧比-万·克诺比”，
“交易日期”：“2018-01-01”，
“IsNewCustomer”：false，
“ItemPuchased”：“Speeder Polish 250ml”，
“数量采购”：2，
“销售总额”：10.04
},
{
“客户名称”：“达斯维德”，
“交易日期”：“2018-01-02”，
“IsNewCustomer”：false，
“ItemPuchased”：“烧伤膏250ml”，
“购买数量”：200000，
“销售总额”：7523840.84
},
{
“客户名称”：“卢克·天行者”，
“交易日期”：“2018-01-02”，
“IsNewCustomer”：false，
“ItemPuchased”：“电源转换器”，
“数量采购”：5，
“销售总额”：1324.02
},
{
“客户名称”：“小屋贾巴”，
“交易日期”：“2019-01-05”，
“IsNewCustomer”：false，
“ItemPuchased”：“跳舞的奴隶小鸡”，
“数量采购”：1，
“销售总额”：150000.00
}
];
类型MyRecord=MyDataObject的类型[编号]；
变量SumColumns:Partial={
“QuantityPurchased”：正确，
“SalesTotal”：正确
};
var和={}；
let columnName:MyRecord的键；
对于（MyDataObject[0]中的columnName]）{
Sum[columnName]=SumColumns[columnName]
？MyDataObject.map（a=>a[columnName]）.reduce（函数（a，b）{返回a+b；}）
：null；
}

根据您成功使用

map

的陈述，我假设您打算将

MyDataObject

作为数组，而不是问题中所示的对象。您可以使用for-in循环迭代第一条记录的键，并检查每个键是要求和还是

null

var MyDataObject = [
  {
    "CustomerName": "Obi Wan Kenobi",
    "TransactionDate": "2018-01-01",
    "IsNewCustomer": false,
    "ItemPuchased": "Speeder Polish 250ml",
    "QuantityPurchased": 2,
    "SalesTotal": 10.04
  },
  {
    "CustomerName": "Darth Vader",
    "TransactionDate": "2018-01-02",
    "IsNewCustomer": false,
    "ItemPuchased": "Burn Cream 250ml",
    "QuantityPurchased": 200000,
    "SalesTotal": 7523840.84
  },
  {
    "CustomerName": "Luke Skywalker",
    "TransactionDate": "2018-01-02",
    "IsNewCustomer": false,
    "ItemPuchased": "Power Converters",
    "QuantityPurchased": 5,
    "SalesTotal": 1324.02
  },
  {
    "CustomerName": "Jabba the Hut",
    "TransactionDate": "2019-01-05",
    "IsNewCustomer": false,
    "ItemPuchased": "Dancing Slave Chick",
    "QuantityPurchased": 1,
    "SalesTotal": 150000.00
  }
];
type MyRecord = typeof MyDataObject[number];

var SumColumns: Partial<{ [K in keyof MyRecord]:
  MyRecord[K] extends number ? true : never }> = {
  "QuantityPurchased": true,
  "SalesTotal": true
};

var Sum = <{ [K in keyof MyRecord]: number | null }>{};
let columnName: keyof MyRecord;
for (columnName in MyDataObject[0]) { 
  Sum[columnName] = SumColumns[columnName]
    ? MyDataObject.map(a => <number>a[columnName]).reduce(function (a, b) { return a + b; })
    : null;
}

var MyDataObject=[
{
“客户名称”：“欧比-万·克诺比”，
“交易日期”：“2018-01-01”，
“IsNewCustomer”：false，
“ItemPuchased”：“Speeder Polish 250ml”，
“数量采购”：2，
“销售总额”：10.04
},
{
“客户名称”：“达斯维德”，
“交易日期”：“2018-01-02”，
“IsNewCustomer”：false，
“ItemPuchased”：“烧伤膏250ml”，
“购买数量”：200000，
“销售总额”：7523840.84
},
{
“客户名称”：“卢克·天行者”，
“交易日期”：“2018-01-02”，
“IsNewCustomer”：false，
“ItemPuchased”：“电源转换器”，
“数量采购”：5，
“销售总额”：1324.02
},
{
“客户名称”：“小屋贾巴”，
“交易日期”：“2019-01-05”，
“IsNewCustomer”：false，
“ItemPuchased”：“跳舞的奴隶小鸡”，
“数量采购”：1，
“销售总额”：150000.00
}
];
类型MyRecord=MyDataObject的类型[编号]；
变量SumColumns:Partial={
“QuantityPurchased”：正确，
“SalesTotal”：正确
};
var和={}；
let columnName:MyRecord的键；
对于（MyDataObject[0]中的columnName]）{
Sum[columnName]=SumColumns[columnName]
？MyDataObject.map（a=>a[columnName]）.reduce（函数（a，b）{返回a+b；}）
：null；
}

我相信angular的HttpClient已经以json格式解析了数据。我知道，但是@woody问他如何将Jason字符串转换为object。我相信angular的HttpClient已经以json格式解析了数据。我知道，但是@woody问他如何将Jason字符串转换为object。对于您给出的第一个示例，每当迭代对象时，在循环内的if条件中使用此方法：hasOwnProperty。此方法检查属性是否属于对象。你可以在这里看到更多：@ArmandoPerez:谢谢你提醒我。我差点忘了。随时都可以，朋友！：）对于您给出的第一个示例，每当您迭代一个对象时，在循环内的if条件中使用此方法：hasOwnProperty。此方法检查属性是否属于对象。你可以在这里看到更多：@ArmandoPerez:谢谢你提醒我。我差点忘了。随时都可以，朋友！：）