如何根据Typecript中的某个给定数字对对象数组的元素进行分组

Question

I've a requirement in Angular project. I've an array of objects. It contains 6 objects. I want to group first 3 in one and other 3 in other group. The array is staticKpi . Here is my logic:

  staticKpi=[{},{},{},{},{},{}];
  ...
  createGrouping() {
    var chunks = [],
      i = 0,
      n = this.staticKpi.length;
    while (i < n) {
      chunks.push(this.staticKpi.slice(i, (i += 3)));
    }
    this.staticKpi = chunks;
  }

Final array should be like:

staticKpi=[[{},{},{}],[{},{},{}]]

But I'm not getting correct output. Here's the stackblitz . Please correct my mistake.

Answer 1

it should help you:

const foo = [1, 2, 3, 4, 5, 6, 7, 8, 9]

const count = 3;
const len = foo.length / 3;

function splitInto(arr){
   return Array(len).fill(0).reduce((acc, _, index) => [...acc, arr.slice(index * 3, index * 3 + 3)], [])
}


const result = splitInto(foo) //  [[1, 2, 3], [4, 5, 6], [7, 8, 9]];

I did not take into account arrays which length is not divided by 3. But it is not hard to figure out how to handle it

Answer 2

function createGrouping(arrData) {
    let result = [];
    let arr3 = [];
    arrData.forEach(item => {
        if(arr3.length < 3) {
            arr3.push(item);
        } else if(arr3.length === 3) {
            result.push([...arr3]);
            arr3 = [];
        }
    });
    result = arr3.length > 0 ? result.push([...arr3]) : result;
    return result;
}

Answer 3

According to your stackblitz sample

import { Component, OnInit, VERSION } from "@angular/core";

@Component({
  selector: "my-app",
  templateUrl: "./app.component.html",
  styleUrls: ["./app.component.css"]
})
export class AppComponent implements OnInit {
  name = "Angular " + VERSION.major;

  staticKpi2: {
    kpi: string;
    headerString: string;
    footerString: string;
  }[] = [];

  staticKpi: {
    kpi: string;
    headerString: string;
    footerString: string;
  }[][] = [];

  breakPoint = 3;

  ngOnInit() {
    this.populateObject();
  }

  populateObject() {
    this.staticKpi2.push(
      ...[
        {
          kpi: "SpO2",
          headerString: "High: 97 and above",
          footerString: "Low: 94 and below"
        },
        {
          kpi: "Temperature",
          headerString: "High: 100.4 and above",
          footerString: "Low: 94 and below"
        },
        {
          kpi: "BP",
          headerString: "High: 140/90 ",
          footerString: "Low: 90/60"
        },
        {
          kpi: "Respiratoin",
          headerString: "High: 25 per min",
          footerString: "Low: 10 per min"
        },
        {
          kpi: "Pulse rate",
          headerString: "High: 100 and above",
          footerString: "Low: 50 and below"
        },
        {
          kpi: "D-Dimer",
          headerString: "Negative: 0.50 and Less",
          footerString: "Positive: Greater than 0.50"
        }
      ]
    );
    // console.log(this.staticKpi);
    this.createGrouping();
  }

  createGrouping() {
    for (let i = 0; i < this.staticKpi2.length; i += this.breakPoint) {
      this.staticKpi.push([...this.staticKpi2].splice(i, this.breakPoint));
    }
    console.log(this.staticKpi);
  }
}