Here's how you can combine several elements from one array and assign them to the first element of another array:

Question

Here's how you can combine several elements from one array and assign them to the first element of another array:

I'm working with an array that looks like this:

public static readonly List: Array<any> = [
    { name: 'CCS', link: 'Dummy link1' },
    { name: 'CCR', link: 'Dummy link2' },
    { name: 'PM', link: 'Dummy link3' },
    { name: 'CM', link: 'Dummy link4' },
    { name: 'JM', link: 'Dummy link5' },
    { name: 'PSM', link: 'Dummy link6' }
];

My goal is to split this array into smaller arrays each containing 3 elements, like so:

ArrayFinal[{
             { name: 'CCS', link: 'Dummy link1' },
             { name: 'CCR', link: 'Dummy link2' },
             { name: 'PM', link: 'Dummy link3' }
           },
           {
             { name: 'CM', link: 'Dummy link4' },
             { name: 'JM', link: 'Dummy link5' },
             { name: 'PSM', link: 'Dummy link6' }
           }]

I've attempted to accomplish this by checking for a modulus of 3 and then creating the new arrays accordingly, but I seem to be facing some issues.

Any guidance or assistance in solving this problem would be greatly appreciated.

UPDATE Here is what I have tried so far:

public func(): any {
    for (let i = 1; i <= Array.List.length; i++) {
        if (i % 3 === 0) {
            this.ArrayFinal[i] = [Array.List[i], Array.List[i - 1], 
            Array.List[i - 2]];
        }
    }

However, it appears to be skipping the first element, and I am struggling to understand why. Any insight on this issue would be incredibly helpful.

angular typescript logic

Answer 1

Answer №1

I successfully transformed the following list:

List: Array<any> = [
    { name: 'CCS', link: 'Dummy link1' },
    { name: 'CCR', link: 'Dummy link2' },
    { name: 'PM', link: 'Dummy link3' },
    { name: 'CM', link: 'Dummy link4' },
    { name: 'JM', link: 'Dummy link5' },
    { name: 'PSM', link: 'Dummy link6' }
  ];

into this structure:

[ 
  [ 
    { "name": "CCS", "link": "Dummy link1" },
    { "name": "CCR", "link": "Dummy link2" }, 
    { "name": "PM", "link": "Dummy link3" }
  ], 
  [ 
    { "name": "CM", "link": "Dummy link4" }, 
    { "name": "JM", "link": "Dummy link5" }, 
    { "name": "PSM", "link": "Dummy link6" }
  ]
]

Utilizing the provided code snippet below:

from(this.List).pipe(
  bufferCount(3)
).subscribe(x => this.groupedList.push(x));

The from function converts the array into an observable.

The bufferCount(3) method groups three elements at a time.

Whenever three elements are emitted from the observable, they are added to an element of the groupedList array.

You can view the implementation on stackblitz: https://stackblitz.com/edit/angular-buffer-count-deborahk

Answer 2

I successfully transformed the following list:

List: Array<any> = [
    { name: 'CCS', link: 'Dummy link1' },
    { name: 'CCR', link: 'Dummy link2' },
    { name: 'PM', link: 'Dummy link3' },
    { name: 'CM', link: 'Dummy link4' },
    { name: 'JM', link: 'Dummy link5' },
    { name: 'PSM', link: 'Dummy link6' }
  ];

into this structure:

[ 
  [ 
    { "name": "CCS", "link": "Dummy link1" },
    { "name": "CCR", "link": "Dummy link2" }, 
    { "name": "PM", "link": "Dummy link3" }
  ], 
  [ 
    { "name": "CM", "link": "Dummy link4" }, 
    { "name": "JM", "link": "Dummy link5" }, 
    { "name": "PSM", "link": "Dummy link6" }
  ]
]

Utilizing the provided code snippet below:

from(this.List).pipe(
  bufferCount(3)
).subscribe(x => this.groupedList.push(x));

The from function converts the array into an observable.

The bufferCount(3) method groups three elements at a time.

Whenever three elements are emitted from the observable, they are added to an element of the groupedList array.

You can view the implementation on stackblitz: https://stackblitz.com/edit/angular-buffer-count-deborahk

Answer 3

Answer №2

To achieve this task, you can utilize a combination of slice and splice operations on arrays. Begin by using slice to extract a portion of the source array, then add this portion to the target array using the spread operator (...), and finally use splice to remove the extracted elements from the source array. Continue iterating through the array until all items have been processed.


while (source.length >= 3) {
    target.push({...source.slice(0, 3)});
    source.splice(0, 3);
}

Answer 4

To achieve this task, you can utilize a combination of slice and splice operations on arrays. Begin by using slice to extract a portion of the source array, then add this portion to the target array using the spread operator (...), and finally use splice to remove the extracted elements from the source array. Continue iterating through the array until all items have been processed.


while (source.length >= 3) {
    target.push({...source.slice(0, 3)});
    source.splice(0, 3);
}

Here's how you can combine several elements from one array and assign them to the first element of another array:

Answer №1

Answer №2

Similar questions

Issues with loading style or script files have been encountered when running ng build and ng build --prod

Is there a way to simulate Pinia and vue-i18n simultaneously?

In Typescript, null values are allowed even when the type is set to be non-nullable

Mongoose TypeScript Aggregation error: is not a valid property of type 'any[]'

Harvesting Angular information using Selenium

Tips on minimizing the vertical size of a mat field housing a mat-select dropdown

Can a type name be converted into a string representation for use as a template literal type?

I possess an item, but unfortunately, I am only able to save the first object from this possession

When attempting to dispatch an action with switchMap, it fails, while map successfully triggers the

The 'this' context setting function is not functioning as expected

"An error in the signature index results in the failure of the

Tips for eliminating top and bottom spacing in angular material mat-row/mat-cell elements

An issue arises when trying to access a resolved variable from UI router in a component

Exploring the Integration of Google Maps and Angular Google Places in Angular 2

Leveraging Fastify's preHandler middleware functionality

Why is there a discrepancy between the value displayed in a console.log on keydown and the value assigned to an object?

Updating Angular components by consolidating multiple inputs and outputs into a unified configuration object

Issue: Unable to resolve all parameters for setupRouter function

Inconsistency with Angular 4 instance variables causes ambiguity within a function

Angular Nested Interface is a concept that involves defining an