Combine multiple arrays into a single array by utilizing a for loop

Question

Combine multiple arrays into a single array by utilizing a for loop

In my lab assignment, I was given an array of names like this:

const names = ['Peter', 'Andrew', 'Ann', 'Mark', 'Josh', 'Sandra', 'Cris', 'Bernard', 'Takesi'];

The task is to write a function that will create an array containing subarrays with three names each:

`[['Peter', 'Andrew', 'Ann'], ['Mark', 'Josh', 'Sandra'], ['Cris', 'Bernard', 'Takesi']]`

I attempted it and ended up with one flat array as follows:

function sortByGroups() {
    let arr = [];
    for (let i = 0; i < names.length; i = i + 3){
        for (let j = i; j < i + 3; j++){
            if (j < i + 2){
                arr += `${names[j]},`;
            } else {
                arr += `${names[j]}`;
            }
        }
        return arr.split(',')
    }
}
console.log(sortByGroups()); // [ 'Peter', 'Andrew', 'Ann' ]

However, I am stuck on how to further manipulate the data to achieve the desired output:

[['Peter', 'Andrew', 'Ann'], ['Mark', 'Josh', 'Sandra'], ['Cris', 'Bernard', 'Takesi']]

javascript arrays for-loop

Answer 1

Answer №1

Given a set of integers represented as i=0,1,2, you can extract elements from 3i to 3i+2

One way to achieve this is using a for-loop:

const names = ['Peter', 'Andrew', 'Ann', 'Mark', 'Josh', 'Sandra', 'Cris', 'Bernard', 'Takesi'];

const groupedNames = []
for(let j=0; j<Math.ceil(names.length); j+=3){
groupedNames.push(names.slice(j,j+3))
}
console.log(groupedNames)

An alternative approach could be...

This method first generates the list of integers and then organizes the entries accordingly.

const names = ['Peter', 'Andrew', 'Ann', 'Mark', 'Josh', 'Sandra', 'Cris', 'Bernard', 'Takesi'];

const groupedNames = Array(Math.ceil(names.length/3)).fill(0).map((_,i)=>names.slice(3*i,3*(i+1)))

console.log(groupedNames)

Answer 2

Given a set of integers represented as i=0,1,2, you can extract elements from 3i to 3i+2

One way to achieve this is using a for-loop:

const names = ['Peter', 'Andrew', 'Ann', 'Mark', 'Josh', 'Sandra', 'Cris', 'Bernard', 'Takesi'];

const groupedNames = []
for(let j=0; j<Math.ceil(names.length); j+=3){
groupedNames.push(names.slice(j,j+3))
}
console.log(groupedNames)

An alternative approach could be...

This method first generates the list of integers and then organizes the entries accordingly.

const names = ['Peter', 'Andrew', 'Ann', 'Mark', 'Josh', 'Sandra', 'Cris', 'Bernard', 'Takesi'];

const groupedNames = Array(Math.ceil(names.length/3)).fill(0).map((_,i)=>names.slice(3*i,3*(i+1)))

console.log(groupedNames)

Answer 3

Answer №2

Iterating through each name in the list, we use a temporary variable lastUsedIndex to keep track of the last element added to a group. We ensure that the current index is greater than the lastUserIndex.
It's important to note that if there is an extra element in the source data, it will form a group with
```
['that data',undefined,undefined]
```
.

const names = ['Peter', 'Andrew', 'Ann', 'Mark', 'Josh', 'Sandra', 'Cris', 'Bernard', 'Takesi'];
let lastUsedIndex = -1;
const groupedNames = [];
names.forEach((name, i) => {
  if (i > lastUsedIndex) {
    lastUsedIndex = i + 2;
    groupedNames.push([names[i], names[i + 1], names[i + 2]]);
  }
})

console.log(groupedNames);

Answer 4

Iterating through each name in the list, we use a temporary variable lastUsedIndex to keep track of the last element added to a group. We ensure that the current index is greater than the lastUserIndex.
It's important to note that if there is an extra element in the source data, it will form a group with
```
['that data',undefined,undefined]
```
.

const names = ['Peter', 'Andrew', 'Ann', 'Mark', 'Josh', 'Sandra', 'Cris', 'Bernard', 'Takesi'];
let lastUsedIndex = -1;
const groupedNames = [];
names.forEach((name, i) => {
  if (i > lastUsedIndex) {
    lastUsedIndex = i + 2;
    groupedNames.push([names[i], names[i + 1], names[i + 2]]);
  }
})

console.log(groupedNames);

Answer 5

Answer №3

You can utilize the Array.reduce method to loop through the array and return the resulting array.

const firstNames = ['Alice', 'Bob', 'Charlie', 'David', 'Eve', 'Frank'];

const groupNames = (num) => firstNames.reduce((previous, current, index) => {
    let arrIndex = Math.floor(index / num);
    previous[arrIndex] = [...(previous[arrIndex] || []), current];
  return previous;
}, []);

console.log(groupNames(2));

Answer 6

You can utilize the Array.reduce method to loop through the array and return the resulting array.

const firstNames = ['Alice', 'Bob', 'Charlie', 'David', 'Eve', 'Frank'];

const groupNames = (num) => firstNames.reduce((previous, current, index) => {
    let arrIndex = Math.floor(index / num);
    previous[arrIndex] = [...(previous[arrIndex] || []), current];
  return previous;
}, []);

console.log(groupNames(2));

Combine multiple arrays into a single array by utilizing a for loop

Answer №1

Given a set of integers represented as i=0,1,2, you can extract elements from 3i to 3i+2

An alternative approach could be...

Answer №2

Answer №3

Similar questions

AJAX, JQuery, JQuery UI, CSS, and custom JavaScript are experiencing loading issues

Creating a tooltip with a left arrow and a bordered design

The jQuery target is not able to locate the specified element

Is it possible to upload numerous profiles into the MYSQL database using this WP template?

There was a parsing error due to an unexpected token, and we were expecting a comma instead

Working with AngularJS to Create Repeated Divs and Buttons

Using Vue to dynamically wrap a component with a tag

The 'palette' property is not found on the Type 'Theme' within the MUI Property

Redirect the URL in react-snap to a new URL with a forward slash at the end

Encountered an issue while configuring mapping upload for Bugsnag within a React Native project

Does SMT-LIB make a distinction between an array and a function with no arguments that returns an array?

How can I restrict Threejs Perspective Camera from going below a Y value of zero?

Customizing font size in React with Material UI: A comprehensive guide on adjusting the font size of the Select component

What is the best method for showing jQuery/Javascript functions in the HTML <pre> element as a string

Does turning off javascript in a browser impact ajax requests and javascript functions?

Leveraging batchWriteItem with dynamodb

Pause a YouTube video automatically when the window is not in focus using FancyBox

Adjusting the settings on my lightbox

THREE.js - Transformative Vertex Shader for Billboards

Is there a way to create a dropdown menu that transforms into a burger icon on smaller screens, while still housing all of my navigation items within it?