如何计算数组二维中的字符串数据并以角度显示在表格中答案

【问题标题】：How to count string data in array 2 dimension and show in table with angular如何计算数组二维中的字符串数据并以角度显示在表格中
【发布时间】：2020-10-31 17:18:58
【问题描述】：

我有下面这样的数据，我想计算该状态以及我应该如何计算它并以 HTML 格式显示在我的表格上。

ps：我正在使用 Angular 8 ps2：请帮帮我，我坚持了这么久。

 0: Array(2)
    0: {uId: "5920502142", name: "นายสุกฤษฏิ์ ทับซ้อน", date: "11/07/2020 00:17", time: "00:17", status: "ONTIME"}
    1: {uId: "5920502142", name: "นายสุกฤษฏิ์ ทับซ้อน", date: "11/07/2020 00:29", time: "-", status: "ABSENT"}
    length: 2
    __proto__: Array(0)
    1: Array(2)
    0: {uId: "6020500357", name: "นายเกียรติพันธ์ พิทักษ์วงศ์", date: "11/07/2020 00:17", time: "00:25", status: "ONTIME"}
    1: {uId: "6020500357", name: "นายเกียรติพันธ์ พิทักษ์วงศ์", date: "11/07/2020 00:29", time: "-", status: "ABSENT"}
    length: 2
    __proto__: Array(0)
    2: Array(2)
    0: {uId: "6020500365", name: "นายธนาธร ทรงพินิจ", date: "11/07/2020 00:17", time: "00:26", status: "LATE"}
    1: {uId: "6020500365", name: "นายธนาธร ทรงพินิจ", date: "11/07/2020 00:29", time: "-", status: "ABSENT"}
    length: 2
    __proto__: Array(0)
    3: Array(2)
    0: {uId: "6020500373", name: "นายใบชา เจนจบวิทยา", date: "11/07/2020 00:17", time: "-", status: "ABSENT"}
    1: {uId: "6020500373", name: "นายใบชา เจนจบวิทยา", date: "11/07/2020 00:29", time: "-", status: "ABSENT"}
    length: 2
    __proto__: Array(0)
    4: Array(2)
    0: {uId: "6020500381", name: "นายภาณุภัสส์ ธนัชญ์สุธาโชติ", date: "11/07/2020 00:17", time: "-", status: "ABSENT"}
    1: {uId: "6020500381", name: "นายภาณุภัสส์ ธนัชญ์สุธาโชติ", date: "11/07/2020 00:29", time: "-", status: "ABSENT"}
    length: 2

【问题讨论】：

你在找什么？，比如{status: string, count: number}?
是的，我需要计算状态以显示在 HTML 上
我有 3 个状态“ONTIME”、“LATE”、“ABSENT”

标签： html arrays json angular

【解决方案1】：

您还可以flatten 数据集并使reducer 更简单一些。

let flat = data.flat();

const count = flat.reduce((acc, item) => {
    acc[item.status]++;
  return acc;
},
{
    ONTIME: 0,
    LATE: 0,
    ABSENT: 0
});

console.log(count);

【讨论】：

【解决方案2】：

完整的状态计数，可以使用reduce这样的方法来完成，

data = [
  [
    { uId: "5920502142", name: "นายสุกฤษฏิ์ ทับซ้อน", date: "11/07/2020 00:17", time: "00:17", status: "ONTIME" }
    , { uId: "5920502142", name: "นายสุกฤษฏิ์ ทับซ้อน", date: "11/07/2020 00:29", time: "-", status: "ABSENT" }
  ],
  [
    { uId: "6020500357", name: "นายเกียรติพันธ์ พิทักษ์วงศ์", date: "11/07/2020 00:17", time: "00:25", status: "ONTIME" }
    , { uId: "6020500357", name: "นายเกียรติพันธ์ พิทักษ์วงศ์", date: "11/07/2020 00:29", time: "-", status: "ABSENT" }
  ],
  [
    { uId: "6020500365", name: "นายธนาธร ทรงพินิจ", date: "11/07/2020 00:17", time: "00:26", status: "LATE" }
    , { uId: "6020500365", name: "นายธนาธร ทรงพินิจ", date: "11/07/2020 00:29", time: "-", status: "ABSENT" }
  ],
  [
    { uId: "6020500373", name: "นายใบชา เจนจบวิทยา", date: "11/07/2020 00:17", time: "-", status: "ABSENT" }
    , { uId: "6020500373", name: "นายใบชา เจนจบวิทยา", date: "11/07/2020 00:29", time: "-", status: "ABSENT" }
  ],
  [
    { uId: "6020500381", name: "นายภาณุภัสส์ ธนัชญ์สุธาโชติ", date: "11/07/2020 00:17", time: "-", status: "ABSENT" }
    , { uId: "6020500381", name: "นายภาณุภัสส์ ธนัชญ์สุธาโชติ", date: "11/07/2020 00:29", time: "-", status: "ABSENT" }

  ]
]

const reducer = (accumulator, arr1) => {
  for (const arr2 of arr1) accumulator[arr2.status]++;
  return accumulator;
};
const statusCount = data.reduce(
  reducer,
  { ONTIME: 0, LATE: 0, ABSENT: 0 }
);

console.log(statusCount);

输出

{ ONTIME: 2, LATE: 1, ABSENT: 7 }

顺便说一句，我假设状态总是采用这三个值。

【讨论】：