Как подсчитать строковые данные в измерении массива 2 и показать в таблице с angular

Question

У меня есть данные, подобные приведенным ниже, я хочу подсчитать этот статус и как мне его подсчитать и отобразить в моей таблице в 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

Answer 1

Вы также можете сгладить набор данных и сделать редуктор немного проще.

let flat = data.flat();

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

console.log(count);

Answer 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);

output

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

Кстати, я предполагаю, что статус всегда принимает эти три значения.