Split array in 2 parts

Question

I'm trying to split an array of n elements (the array elements number always can be divided in 2), for example I have an array with 20 elements, right now I'm able to split the first 10 elements and show it but I don't have any idea of how to split the next 10 elements, here is my code to see more or less what I'm trying to do:

var array = "1, 5, 4, 3, 2, 6, 7, 8, 6, 55, 4, 33, 67, 7, 65, 45, 34, 32, 12, 23";
var array1 = [];
var array2 = [];

$(document).ready(function() {
  $('#btn').click(function() {
    magic();
  });
});

function magic() {
  var split;
  var data = array.split(",");
  var total = data.length;

  for (var i = 0; i < total / 2; i++) {
    array1.push(data[i]);
  }

  $('#a1').text(array1);

}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button id="btn">Magic!</button>

<div>
  <h4>Array 1</h4>
  <p id="a1"></p>
</div>

<hr>

<div>
  <h4>Array 1</h4>
  <p id="a2"></p>
</div>

If you see my code the array 2 elements must be:

4, 33, 67, 7, 65, 45, 34, 32, 12, 23

What should I do to do this? In other words, if I have 50 elements I want to fill array 1 with the first 25 elements and array 2 with the rest of the elements. Thanks in advance for any help!

Answer 1

Niona Scholz answer was great, but, with an array of odd lenght don't work well... With this have this problem solved:

a.slice(0, Math.ceil(a.length / 2))
a.slice(Math.ceil(a.length / 2))

Answer 2

You could use Array#slice

var array = "1, 5, 4, 3, 2, 6, 7, 8, 6, 55, 4, 33, 67, 7, 65, 45, 34, 32, 12, 23";

$(document).ready(function() {
  $('#btn').click(function() {
    magic();
  });
});

function magic() {
  $('#a1').text(array.slice(0, array.length / 2));
  $('#a2').text(array.slice(array.length / 2));
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button id="btn">Magic!</button>
<div>
  <h4>Array 1</h4>
  <p id="a1"></p>
</div>
<hr>
<div>
  <h4>Array 1</h4>
  <p id="a2"></p>
</div>

Answer 3

use .slice() in javascript

The slice() method returns a shallow copy of a portion of an array into a new array object selected from begin to end (end not included). The original array will not be modified.

var str = "1, 5, 4, 3, 2, 6, 7, 8, 6, 55, 4, 33, 67, 7, 65, 45, 34, 32, 12, 23";
var array = str.split(',');
var len = (array.length) / 2;

var array1 = array.slice(0, len);
var array2 = array.slice(len);

console.log(array1);
console.log(array2);

Answer 4

Splice the array:

var myArr = ["1", "5", "4", "3", "2", "6", "7", "8", "6", "55", "4", "33", "67", "7", "65", "45", "34", "32", "12", "23"];
function splitArr(arr2) {
  var arr1 = arr2.splice(0,Math.floor(arr2.length/2))
  return [arr1,arr2];
}
console.log(splitArr(myArr))

Answer 5

Simply use slice

var array = "1, 5, 4, 3, 2, 6, 7, 8, 6, 55, 4, 33, 67, 7, 65, 45, 34, 32, 12, 23";
var array1 = [];
var array2 = [];

$(document).ready(function() {
  $('#btn').click(function() {
    magic();
  });
});

function magic() {
  var split;
  var data = array.split(",");
  var total = data.length;

  array1 = data.slice(0, total / 2);

  array2 = data.slice(total / 2);

  $('#a1').text(array1);
  $('#a2').text(array2);
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button id="btn">Magic!</button>

<div>
  <h4>Array 1</h4>
  <p id="a1"></p>
</div>

<hr>

<div>
  <h4>Array 1</h4>
  <p id="a2"></p>
</div>

Answer 6

With array.slice() you can give a beginning and end, to answer your hypothetical question:

array1 = array.slice(0, 25);

Answer 7

You can use JS slice:

a = array.slice(0,10);
b = array.slice(10,20);

You can also use lodash chunk method.