Arranging elements from one array into another array in Javascript in ascending order

Question

Arranging elements from one array into another array in Javascript in ascending order

I have a unique collection of arrays with varying lengths. For example, in my test scenario, I initialized my vidArray with 4 arrays (having lengths of 16, 38, 49, and 49 respectively). My goal is to create a newArray that combines the elements from each array in sequence.

This is my approach:

      // populate newArray
      var newArray = []
      for(let i=0; i < vidArray.length; i++){
        let currentArray = vidArray[i]
        for(let j=0; j < currentArray.length; j++){
          newArray.push(currentArray[j])
        }
      }

      console.log("newArray: "+newArray)

However, the output appears incorrect as it seems to mix elements from different arrays inconsistently.

javascript arrays for-loop

Answer 1

Answer №1

If you want to determine the maximum length of subarrays, simply loop through all arrays and create a new array by including corresponding values from each subarray if they exist:

const vidArray = [
  [1, 2, 3, 4, 5],
  [11, 12, 13, 14],
  [21, 22, 23],
  [31, 32, 33, 34, 35, 36]
];

let newArray = [];
const maxLength = Math.max(...vidArray.map(a => a.length));

for (let i = 0; i < maxLength; i++) {
  vidArray.forEach(a => {
    if (a[i]) newArray.push(a[i]);
  });
}

console.log(newArray);

Answer 2

If you want to determine the maximum length of subarrays, simply loop through all arrays and create a new array by including corresponding values from each subarray if they exist:

const vidArray = [
  [1, 2, 3, 4, 5],
  [11, 12, 13, 14],
  [21, 22, 23],
  [31, 32, 33, 34, 35, 36]
];

let newArray = [];
const maxLength = Math.max(...vidArray.map(a => a.length));

for (let i = 0; i < maxLength; i++) {
  vidArray.forEach(a => {
    if (a[i]) newArray.push(a[i]);
  });
}

console.log(newArray);

Answer 3

Answer №2

Check out this interesting approach that leverages a mix of reduce and forEach.

const data = [
  ["apple", "banana", "cherry", "date"],
  ["elderberry", "fig"],
  ["grape", "honeydew", "kiwi", "lemon"],
  ["mango", "nectarine", "orange"]
]

const resultArray = data.reduce((accumulator, innerArray) => {
  innerArray.forEach((element, index) => {
    if (!accumulator[index]) accumulator[index] = [];
    accumulator[index].push(element);
  });
  return accumulator;
}, []);

console.log(resultArray);

// To get the final output as one single array:
console.log(resultArray.flat());

Answer 4

Check out this interesting approach that leverages a mix of reduce and forEach.

const data = [
  ["apple", "banana", "cherry", "date"],
  ["elderberry", "fig"],
  ["grape", "honeydew", "kiwi", "lemon"],
  ["mango", "nectarine", "orange"]
]

const resultArray = data.reduce((accumulator, innerArray) => {
  innerArray.forEach((element, index) => {
    if (!accumulator[index]) accumulator[index] = [];
    accumulator[index].push(element);
  });
  return accumulator;
}, []);

console.log(resultArray);

// To get the final output as one single array:
console.log(resultArray.flat());

Arranging elements from one array into another array in Javascript in ascending order

Answer №1

Answer №2

Similar questions

Expanding the size of a div using the Bootstrap grid system

Have Babel transpile configuration files into CommonJS format

Unable to trigger onclick event for creating a new title

What could be causing these strange white lines to show up on my AFrame meshes?

Sending the handleSubmit() function to the child component does not alter the state of the parent component

What is the best way to identify when a cell has been modified in ng-grid aside from just relying on the ng-grid event

What is the most effective way to ensure that a child component only executes when a link is clicked on the Vue component?

Transmission of state modifications in React

Error in Charts API - [draw function failed to render for one or more participants]

Using a Svelte click event to toggle a boolean value in an array from a div

Having trouble with the Bootstrap dropdown not activating the click event?

Why is Visual Studio Code not highlighting my nested multi-line JavaScript comment as I anticipated?

Tips for deleting a duplicate identifier within an li element that possesses a particular class through javascript

Having trouble with popovers after upgrading to bootstrap v4

Setting up Stylelint in a Vue 3 app with VSCode to automatically lint on save

Transform an Angular 2 application to seamlessly incorporate an SDK

Update destination upon click

Can you explain the meaning of the code provided below?

Retrieving Records within a Specific Date Range for Check-ins and Check-outs

mandatory data fields for an HTML form