求和 children 并用 parents 数组树累加 Angular 打字稿

Question

我正在处理 Angular 11 个项目，我需要按行显示带有输入的树视图，用户可以更改输入的值，我需要为输入的每个更改重新计算总计。我想计算 child 节点的总和并将其保存在 parent 节点上以显示新的总数。

这是“total”键的数据结构和预期结果

dataTreeView =  [
      {
        "account_id": "42",
        "account_parent": null,
        "name": "Ingresos de actividades ordinarias",
        "total": 17, // expected result sum 5 + 12 = 17
        "children": [
          {
            "account_id": "422",
            "account_parent": "42",
            "name": "Ventas",
            "total": 5
          },
          {
            "account_id": "421",
            "account_parent": "42",
            "name": "Devoluciones en ventas",
            "total": 12
          }
        ]
      },
      {
        "account_id": "55",
        "account_parent": null,
        "name": "Costos de ventas y operación",
        "total": 24, // expected result 19 + 5
        "children": [
          {
            "account_id": "552",
            "account_parent": "55",
            "name": "Costos de la mercancía vendida",
            "total": 19, // expected result sum 5 + 14 = 19
            "children": [
              {
                "account_id": "5524",
                "account_parent": "552",
                "name": "Devoluciones en compras de inventario",
                "total": 14, // expected result sum 4 + 10 = 14
                "children": [
                  {
                    "account_id": "55241",
                    "account_parent": "5524",
                    "name": "Descuentos",
                    "total": 10
                  },
                  {
                    "account_id": "55242",
                    "account_parent": "5524",
                    "name": "Otros",
                    "total": 4
                  },
                ]
              },
              {
                "account_id": "5523",
                "account_parent": "552",
                "name": "Costos del inventario",
                "total": 5
              },
            ]
          },
        ]
      }
    ]

我尝试使用 reduce 但没有用

data.reduce(function x(r, a) {
 a.total = a.total || (Array.isArray(a.children) && 
 a.children.reduce(x, 0)) || 0;
 return r + a.total;
}, 0)

感谢您对此解决方案的帮助

感谢和问候

Answer 1

对于数组的每个元素，您要设置值 total，即 children 中所有 total 的总和，对吗？

data.forEach(el => {
  el.total = el.total + el.children.reduce((a,b) => a.total + b.total);
}

Answer 2

如果您有 total 的值和其他总和为新值的嵌套值，您可以将 o.total 移动到表达式的末尾并首先计算数组。

const
    updateTotal = (r, o) => r + (
        o.total = (o.children || []).reduce(updateTotal, 0) || o.total || 0
    ),
    data = [{ account_id: "42", account_parent: null, name: "Ingresos de actividades ordinarias", total: 10, children: [{ account_id: "422", account_parent: "42", name: "Ventas", total: 5 }, { account_id: "421", account_parent: "42", name: "Devoluciones en ventas", total: 12 }] }, { account_id: "55", account_parent: null, name: "Costos de ventas y operación", total: 0, children: [{ account_id: "552", account_parent: "55", name: "Costos de la mercancía vendida", total: 0, children: [{ account_id: "5524", account_parent: "552", name: "Devoluciones en compras de inventario", total: 0, children: [{ account_id: "55241", account_parent: "5524", name: "Descuentos", total: 10 }, { account_id: "55242", account_parent: "5524", name: "Otros", total: 4 }] }, { account_id: "5523", account_parent: "552", name: "Costos del inventario", total: 5 }] }] }];

data.reduce(updateTotal, 0);

console.log(data)

.as-console-wrapper { max-height: 100% !important; top: 0; }

Answer 3

你需要一个递归函数来遍历你的树

const data = [
  {
    "account_id": "42",
    "account_parent": null,
    "name": "Ingresos de actividades ordinarias",
    "children": [
      {
        "account_id": "422",
        "account_parent": "42",
        "name": "Ventas",
        "total": 5
      },
      {
        "account_id": "421",
        "account_parent": "42",
        "name": "Devoluciones en ventas",
        "total": 12
      }
    ]
  },
  {
    "account_id": "55",
    "account_parent": null,
    "name": "Costos de ventas y operación",
    "children": [
      {
        "account_id": "552",
        "account_parent": "55",
        "name": "Costos de la mercancía vendida",
        "children": [
          {
            "account_id": "5524",
            "account_parent": "552",
            "name": "Devoluciones en compras de inventario",
            "children": [
              {
                "account_id": "55241",
                "account_parent": "5524",
                "name": "Descuentos",
                "total": 10
              },
              {
                "account_id": "55242",
                "account_parent": "5524",
                "name": "Otros",
                "total": 4
              },
            ]
          },
          {
            "account_id": "5523",
            "account_parent": "552",
            "name": "Costos del inventario",
            "total": 5
          },
        ]
      },
    ]
  }
]

function addTotalFromChildren(arr){ //Important function
  arr.forEach(obj => { //For each element of the array
    if("children" in obj) { //Check if element has children
      addTotalFromChildren(obj.children) //Then, we need to calculate the add total for those children
      obj.total = obj.children.reduce((a, v) => a += v.total, 0) //then we calculate the sum of those total
    } //Else it already has a total property
  })
}
addTotalFromChildren(data)
console.log(data)

我添加了一些注释来解释代码。

如果您在下面的评论中有不明白的地方，请告诉我。

求和 children 并用 parents 数组树累加 Angular 打字稿

Sum children and acumulate with parents array tree Angular Typescript

javascript

angular

typescript

treeview