Looping through an array and outputting as pairs (delimiter for every second element)

Question

I have an array with anonymous elements. Elements are added to the array via php, for example:

$playlist = array(); while (databaseloop) { $playlist[] = $a_title; $playlist[] = $a_length; } echo json_encode(array('playlist'=>$playlist)); 

So the array becomes:

 ["Hello.mp3", "00:00:14", "Byebye.mp3", "00:00:30", "Whatsup.mp3", "00:00:07", "Goodnight.mp3", "00:00:19"] and so on 

Then I get this array in jquery with ajax message. All of this works great.

Now I'm looking for a way to process / output all elements of an array as pairs in javascript / jquery. "do something" for every second element. Like this:

 foreach (two_elements_in_array) { // output track name // output track time // output some divider } 

How can I do that?

Answer 1

Well, maybe this is the most basic solution:

 for (var i = 0; i < arr.length; i += 2) { var title = arr[i]; var len = arr[i+1]; } 

---

However, I would recommend you organize $playlist as follows:

 while (databaseloop) { $playlist[] = array( "title" => $a_title, "length" => $a_length ); } 

Then it will be easy to iterate the elements simply:

 for (var i = 0; i < arr.length; i++) { var title = arr[i]['title']; var len = arr[i]['length']; } 

Answer 2

You can split an array into an array of two-element arrays.

 var arr = ["Hello.mp3", "00:00:14", "Byebye.mp3", "00:00:30", "Whatsup.mp3", "00:00:07", "Goodnight.mp3", "00:00:19"]; arr.map(function(elem,i,arr){return [elem, (i+1<arr.length) ? arr[i+1] : null];}) .filter(function(elem,i){return !(i%2);}); 

Answer 3

Not with foreach .

 for (var i = 0; i < array.length; i += 2) { var name = array[i]; var time = array[i + 1]; // do whatever } 

Answer 4

Simple for a loop with an increment of two. You might want to make sure that the length of your array is long enough for i + 1 if the length is not divisible by 2!

 for (i = 0; i+1 < array.length; i+=2) { name = array[i]; length = array[i+1]; } 

Answer 5

 var arr = ["Hello.mp3", "00:00:14", "Byebye.mp3", "00:00:30", "Whatsup.mp3", "00:00:07", "Goodnight.mp3", "00:00:19"]; var group = []; for (var x = 0; x < arr.length; x += 2) { var track = arr[x], length = arr[x + 1]; group.push({ track: track, length: length }) } 

Answer 6

as @VisioN said it would be easier if you use an associative array, otherwise you might have a dedicated array of labels, iterations on the client side

 var d=["Hello.mp3", "00:00:14", "Byebye.mp3", "00:00:30", "Whatsup.mp3", "00:00:07", "Goodnight.mp3", "00:00:19"] ; var e=["name","time"]; var c=0; $.each(d,function(i,j){ if(c>=2)c=0; console.log(e[c]+j); c++; }); 

http://jsfiddle.net/FmLYk/1/

Answer 7

I would suggest that you optimize your code a bit more so that it becomes a little more understandable and less error prone, if possible. This is also a great way to be more object oriented!

Like this (I am using jQuery here):

 var array = [ {name: "Hello.mp3", time: "00:00:14"}, {name: "Byebye.mp3", time:"00:00:30"}, {name: "Whatsup.mp3", time: "00:00:07"}, {name: "Goodnight.mp3", time: "00:00:19"}]; 

Then you can iterate over it and create cleaner code

 array.forEach(function(data){ //edit the output here console.log(data.name + " " + data.time ); }); 

Answer 8

Destructive but clean:

 while (arr.length) { const Title = arr.shift(); const Length = arr.shift(); // Do work. } 

Answer 9

Using Array.prototype.reduce () :

 let pairs = playlist.reduce((list, _, index, source) => { if (index % 2 === 0) { list.push(source.slice(index, index + 2)); } return list; }, []); 

This gives you a 2 dimensional array of pairs to work with.