Divide array in two parts in Javascript

Question

I have an array of N elements. I'd like to divide in two arrays. The only condition is that the first new array is formed by the first three elements of the original array, and the second new array must contain ALL the other elements. For example the original array contains ["a","b","c","d","e","f","g","h"]. I'd like to create two new arrays:

first new array: ["a, "b", "c"];
second new array: ["d","e","f", "g","h"].

But my code divide a lot of time the original array. Why?

function MyCtrl($scope) {
$scope.strengthChartData = ["Banana", "Orange", "Apple", "Mango", "asd", "lol", "ahhhaha", "llllll", "ehhehehe", "oooo", "aaaaa", "bbbbbbbb"];

$scope.arrays = [];
var size = 3;

while ($scope.strengthChartData.length > 0)
    $scope.arrays.push($scope.strengthChartData.splice(0, size));
}

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app ng-controller="MyCtrl">
    <h3>All elements:</h3>
    <br>
    <ul>
        <li ng-repeat="array in arrays">{{array}}</li>
    </ul>
    
    <h3>First array:</h3>
    <br>
    <ul>
        <li ng-repeat="array in arrays[0]">{{array}}</li>
    </ul>

    <h3>Second array:</h3>
    <br>
    <ul>
        <li ng-repeat="array in arrays[1]">{{array}}</li>
    </ul>
</div>

Avoid while conditions where possible - unless you're OK with the possibility of something running indefinitely in the background. If something can be solved with a finite cycle, it's usually a better approach. — Dropout
– Dropout, Commented Mar 30, 2016 at 13:49

Pranav C Balan · Accepted Answer · 2016-03-30 13:53:42Z

3

You can use splice() for that

var arr = ["a", "b", "c", "d", "e", "f", "g", "h"],
  arr1 = arr.splice(3);

document.write(JSON.stringify(arr) + '<br/>' + JSON.stringify(arr1));

UPDATE : If you don't want to update the original array then create new array and apply splice() or use slice()

Using slice() only

var arr = ["a", "b", "c", "d", "e", "f", "g", "h"],
  arr1 = arr.slice(0, 3);
arr2 = arr1.slice(3);

document.write(JSON.stringify(arr) + '<br/>' +
  JSON.stringify(arr1) + '<br/>' +
  JSON.stringify(arr2));

Using splice() and slice() without any parameter to copy all elements

var arr = ["a", "b", "c", "d", "e", "f", "g", "h"],
  arr1 = arr.slice();
arr2 = arr1.splice(3);

document.write(JSON.stringify(arr) + '<br/>' +
  JSON.stringify(arr1) + '<br/>' +
  JSON.stringify(arr2));

edited Mar 30, 2016 at 13:53

answered Mar 30, 2016 at 13:42

Pranav C Balan

115k25 gold badges172 silver badges195 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Wainage Over a year ago

This will mutate the original. I thought (it wasn't 100% clear) he didn't want to mutate the original array.

Wainage · Accepted Answer · 2016-03-30 13:42:33Z

1

var a = ["a","b","c","d","e","f","g","h"];

var b = a.slice(0,3); // => ["a","b","c"]
var c = a.slice(3);   // => ["d", "e", ... ]

answered Mar 30, 2016 at 13:42

Wainage

5,5423 gold badges16 silver badges24 bronze badges

Comments

Harshil Kulkarni · Accepted Answer · 2016-03-30 13:43:06Z

0

Use slice, for example:

var ar = [1,2,3,4,5,6];

var p1 = ar.slice(0,4);
var p2 = ar.slice(4);

answered Mar 30, 2016 at 13:43

Harshil Kulkarni

4115 silver badges20 bronze badges

Comments

juvian · Accepted Answer · 2016-03-30 13:45:37Z

0

As for why:

The length of strengthChartData is 12. In your while, you are pushing to your arrays variable 3 first elements of strengthChartData AND you are removing them from strengthChartData, as splice modifies the array.

So your length is now 3 minus. You are doing this while the lenght is greater than 0, which means it will run when length it 12,9,6,3 and will stop at 0. So you are actually pushing four times the first 3 elements from strengthChartData to your array variable

answered Mar 30, 2016 at 13:45

juvian

16.1k2 gold badges42 silver badges40 bronze badges

Collectives™ on Stack Overflow

Divide array in two parts in Javascript

4 Answers 4

1 Comment

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

1 Comment

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related