Breaking down arrays in Typescript

Let's say I have an array like this:

public taskListCustom: any=[
{title: 'Task 1', status: 'done'},
{title: 'Task 2', status: 'done'},
{title: 'Task 3', status: 'done'},
{title: 'Task 4', status: 'done'},
{title: 'Task 5', status: 'done'},
{title: 'Task 6', status: 'done'},
{title: 'Task 7', status: 'done'},
{title: 'Task 8', status: 'done'},
{title: 'Task 9', status: 'done'},
{title: 'Task 10', status: 'done'},
{title: 'Task 11', status: 'done'},
{title: 'Task 12', status: 'done'},
{title: 'Task 13', status: 'done'},
{title: 'Task 14', status: 'done'},
{title: 'Task 15', status: 'done'},
{title: 'Task 16', status: 'done'},
{title: 'Task 17', status: 'done'},
{title: 'Task 18', status: 'done'},
{title: 'Task 19', status: 'done'},
{title: 'Task 20', status: 'done'},
{title: 'Task 21', status: 'done'},
{title: 'Task 22', status: 'done'},
{title: 'Task 23', status: 'done'},
{title: 'Task 24', status: 'done'},
]

In addition, I have an empty array called

public taskListCustomChunked: any=[];

My objective is to divide the taskListCustom array into smaller arrays based on a specified chunk size. For instance, if the chunk size is 6 (which can range from 4 to 11), I need to create 6 chunks of equal size and store them in the taskListCustomChunked array. This would result in something like:

taskListCustomChunked = [[1,2,3,4],[5,6,7,8],[9,10,11,12],[13,14,15,16],[..],[..]]

How can I achieve this?

Answer №1

To accomplish this task, you can utilize the slice method.

let itemList=[ {name: 'Item 1', category: 'category1'}, {name: 'Item 2', category: 'category1'}, {name: 'Item 3', category: 'category1'}, {name: 'Item 4', category: 'category2'}, {name: 'Item 5', category: 'category2'}, {name: 'Item 6', category: 'category3'}, ]
let size= 3;
let partitionSize=Math.round(itemList.length/size);
let output=[];
for (i=0; i<itemList.length; i+=partitionSize) {
    if(output.length<size-1)
      output.push(itemList.slice(i,i+partitionSize).map(a=>a.name));
    else{
      output.push(itemList.slice(i).map(a=>a.name));
      break;
    }
}
console.log(output);

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

What is the best way to adjust the layout of these two elements using CSS in order to display them on

I need assistance with adjusting the layout of a dropdown list next to its label in an Angular html page. <div *ngIf="this.userRole == 'myrequests'" class="col-2" [ngClass]="{ 'd-none': view != 'list&apo ...

Attempting to assign a thumbnail image to a file on Google Drive by utilizing JavaScript

I've been working on adding thumbnails to the files that I upload to Google Drive using Javascript. I'm following the instructions outlined at https://developers.google.com/drive/v3/web/file#uploading_thumbnails For my web-safe base64 image, I c ...

Using a loop to chain jQuery's .when().then() method and ensuring a fixed final call at the end of the

The solution that closely matches my issue can be found at One common use case for .then is chaining ajax requests: $.ajax({...}).then(function(){ return $.ajax({...}); }).then(function(){ return $.ajax({...}); }).then(function(){ retu ...

Exploring Vue CLI: Guidelines for updating, deleting, and browsing through all available plugins

After diving into the world of Vue.js, I quickly realized that Vue CLI is essential for speedy development. I got it up and running, created an app, and everything seems to be going smoothly. I decided to enhance my project by adding the Vuetify.js plugin ...

display and conceal elements and refresh action

Can anyone help me with a function to hide and show a div? function toggledDivVisibility(divName) { if (divName.is(':hidden')) { var hiddenDiv = document.getElementById("filter"); hiddenDiv.style.display = 'block&a ...

Loading content dynamically into a div from an external or internal source can greatly enhance user experience on a website. By

As I work on my website, I am incorporating a div structure as shown below: <div class="container"> <div class="one-third column"> <a id="tab1" href="inc/tab1.html"><h2>tab1</h2></a> </div> & ...

The scroll bar will be automatically reset once the content inside is updated by using the $selector.html() function

I am looking to create a dynamic scrollable content feature. Initially, I retrieve the data and set the content as follows: $("#sub_menu li").on("click", function () { $("#gallery").html(get_html($(this).attr("id"))); $("#gallery").cs ...

Unveiling the solution: Hide selected options in the input field of Material UI Autocomplete in React

I need help with not displaying the labels of selected options in the input field. I think it might be possible to do this using the renderInput property, but I'm not sure how. Even with the limitTags prop, the options still show up in the input field ...

Bot in discord.js refuses to exit voice channel

I've been struggling to get my bot to leave the voice channel despite trying multiple methods. Here's what I've attempted in the source code: Discord.VoiceConnection.disconnect(); Although this is the current code, I have also tested: messa ...

The React client is unable to establish a connection with the server socket

Recently diving into the world of socket-io and react, utilizing express for the backend. The socket.io-client version being used is 3.0.3, while the backend's socket-io package matches at 3.0.3 as well. Interestingly enough, the server handles connec ...

Angular directive for converting fields to title case

I have created a custom directive to transform all table column data into titlecase. The directive I implemented is designed to achieve this transformation, keeping in mind that pipes are not being counted: @Directive({ selector: '[appTitleCase]' ...

Tips for displaying real-time data and potentially selecting alternative options from the dropdown menu

Is there a way to display the currently selected option from a dropdown list, and then have the rest of the options appear when the list is expanded? Currently, my dropdown list only shows the available elements that I can choose from. HTML: < ...

What is the best way to transfer a property-handling function to a container?

One of the main classes in my codebase is the ParentComponent export class ParentComponent extends React.Component<IParentComponentProps, any> { constructor(props: IParentComponent Props) { super(props); this.state = { shouldResetFoc ...

Exploring the Benefits of Using AJAX with Single or Multiple JavaScript Files

Here's a question for best practices. I'm working on building an AJAX application where the main page loads everything through AJAX into the content section. Should I merge all my javascript files into one that is loaded on the main page, or spli ...

Navigate a first person simulation using three.js and control your movements with the keyboard arrow

To access my reference material, please go to http://jsfiddle.net/fYtwf/ Overview I am working on a basic 3D simulation using three.js where the camera is surrounded by cubes in three dimensions. These cubes serve as a visual guide to where the camera is ...

Encountering difficulties in generating a binary from a nodejs application with pkg

I am having trouble generating a binary executable from my nodejs app using the pkg command. My nodejs app is simple and consists of only three .js files: index.js, xlsx_to_pdf.js, and xlsx_extractor.js. This is how my package.json file looks like: { & ...

Interacting with the Dropdown feature on the page causes the body of the page to shift

I am encountering an issue with 2 dropdowns in Datatables used to filter content. The problem arises when a dropdown is positioned on the right side of the page, causing a shift to the left by approximately 10px. Conversely, if the dropdown is placed on th ...

granting authorization to modify content post channel establishment in discord using discord.js

I am encountering an issue with granting the message.author and staff permission to view the channel right after its creation. The problem arises when the channel's parent (category) is changed, causing it to synchronize with the permissions of the pa ...

Guide on deploying a web application using Socket.io and SvelteKit on Vercel

Currently, I'm developing a multiplayer .io-style game that utilizes both Socket.io and SvelteKit. While testing the project on a local development server, everything runs smoothly. However, upon deploying to Vercel, an error message stating Failed to ...

Integrating a feature for displaying No Results Found

I am struggling to modify a script for auto-completing search fields. My goal is to include a "No Results Found" option along with a hyperlink when no matching results are found. I'm having difficulty figuring out how to add an else statement to displ ...