Combine Arrays in Order JavaScript

Question

I have a few arrrays which I am trying to combine in a certain order. For example, lets say I have three arrays:

var arrayOne = [1a, 1b, 1c];
var arrayTwo = [2a, 2b, 2c];
var arrayThree [3a, 3b, 3c];

how would I get something like this?

var combinedArray = [1a, 2a, 3a, 1b, 2b, 3b, 1c, 2c, 3c]

EDIT

Ok, I am going to add a little more to my story here since I have gotten some great responses and answers from everyone. Maybe this will be clearer. I have a SharePoint list which I am getting all of my information from. I am using SPServices to get my data from the list. I am also getting the version history of each list item and placing them into arrays so I can pull the data out of the SPServices loop and use it outside of the SharePoint stuff so I can try to order and display it as I want. (Please do not move this to SharePoint ). This is all going to have to happen at runtime. So here is the first part. I am declaring global variables for each one of my list items:

var proModified6 = new Array();
var proHistory = new Array();
var assignedTo = new Array();
var startDate = new Array();
var endDate = new Array();
var status = new Array();
var project = new Array();
var history = new Array();


var listItems = new Array();


var regex = new RegExp("");

var i = 0;

Then I am filling the arrays with the SharePoint list info ( I am not going to put them all but each has a call like this one)

$().SPServices({
  operation: "GetVersionCollection",
      async: false,
      webURL: "http://devchrisl01/test",
      strlistID: "NewProjects",
      strlistItemID: proID[i],
      strFieldName: "Title",         

      completefunc: function (xdata, Status) {

        $(xdata.responseText).find("Version").each(function() {

       //alert(xdata.responseXML.xml);

       var xitem = $(this);
            var ID = xitem.attr('ID');
            var Project = xitem.attr('Title');
            var Modified = xitem.attr('Modified').split('T')[0];
            var ModifiedTime = xitem.attr('Modified').substring(11, 19);
           //var modifiedUl = "<td><b>" + Modified + " " + ModifiedTime + "</b></td>";
  //$('#versionList'+i+'').append(modifiedUl);

                  project.push(Project);
                  proModified2.push(Modified + ModifiedTime)


    // just looking at my data here not really part of my problem       
var data = "<tr><td><b>" + Modified + " " + ModifiedTime + "</b></td><td>" + Project + "</td></tr>";


$('#versionList'+i+'').append(data);

        });  

      }

});

After is where my question has come into play. I am getting all of my data back I need. I have not found a better way to store all of the list information and pull it out of the SPServices besides using an array for each. The kicker is I am not going to know how many arrays there are going to be or how long. Eventually this is going to be dynamic. (PAIN IN THE ASS ) so here are the arrays:

var modifiedDate = [proModified1, proModified2, proModified3, proModified4, proModified5, proModified6];
var projectHistory = [history];
var projectTitle = [project];
var projectAssignedTo = [assignedTo];
var projectStartDate = [startDate];
var projectEndDate = [endDate];
var projectStatus = [status];

Each one is going to be different. There is not going to be the same amount of them either for each user. I have just made my list static to build on first. List dynamics will be another question later :0

Is there going to be a way for me to do with these arrays like I asked in my simple example? See why I went simple first lol.

No some will be smaller or larger depending on entries. I am getting the array data based off of a sharepoint list. each one of the arrays I am using represents the version of each item. So when it is handed to the users I will have no idea how many items will be in each array. kinda long explination :) just trying to give you an idea of what I am trying to do. Thanks — lazoDev
– lazoDev, Commented Apr 24, 2012 at 19:49
what do you expect to happen if the arrays were different lengths... can you give an example? — Hristo
– Hristo, Commented Apr 24, 2012 at 19:50
I was trying to get simple with this because what I am doing is a little complex. I was trying to not get into too much of what I was doing. Sorry for being vague. What I would like is a blank value or undefined would be ok. I know my problem is going to be not knowing the length of the array. Welcome to my nightmare. I was hoping if I could get them organized I would be able to sort them. That is why my question is so simple let’s say. If I have too I will put my stuff in here with an edit but it will be moved to SharePoint I know it. Thanks for all of the quick responses. — lazoDev
– lazoDev, Commented Apr 24, 2012 at 20:02
I am going to edit and repost to this with more detail about what I am doing. It is in SharePoint but my problem is with the arrays and not SharePoint so maybe they will not move it. — lazoDev
– lazoDev, Commented Apr 24, 2012 at 20:16

Selvakumar Arumugam · Accepted Answer · 2012-04-24 20:51:00Z

3

Edit: Updated comparator as Salmon pointed out that it should return -1, 0 or 1.

Try below,

var arrayOne = ["1a", "1b", "1c"];
var arrayTwo = ["2a", "2b", "2c"];
var arrayThree = ["3a", "3b", "3c"];

var combinedArray = arrayOne
    .concat(arrayTwo, arrayThree) //Concatenate the array.. can add any number of arrays
    .sort(function(a, b) { //Custom comparator for your data
       var a1 = a.charAt(1);
       var b1 = b.charAt(1);

       if (a1 == b1) return 0;
       if (a1 < b1) return -1;
       return 1;
    });

Note: The custom comparator function is very specific to your data. Update the function as you need.

DEMO

edited Apr 24, 2012 at 20:51

answered Apr 24, 2012 at 19:48

Selvakumar Arumugam

79.9k15 gold badges123 silver badges139 bronze badges

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

14 Comments

ajax333221 Over a year ago

your code should produce xa,ya,za,xb,yb,zb,xc,yc,zc with this values jsfiddle.net/NzuBL/1 but it returns xa,xb,xc,ya,yb,yc,za,zb,zc

Selvakumar Arumugam Over a year ago

@ajax333221 Did you read the Note?? Did OP mention that data in his post? Did you downvote because it failed for something that OP never asked for?

Salman Arshad Over a year ago

I am afraid the specific data was probably made-up data, not something that OP will actually be working upon.

ajax333221 Over a year ago

@Vega everyone makes mistakes, I now undownvoted, but I think that is not what OP wants. (but it works for that particular data values)

Selvakumar Arumugam Over a year ago

@ajax333221 No problem, thanks for leaving a comment.. most time, people just downvote and disappear which really doesn't help in anyways.

|

georg · Accepted Answer · 2012-04-24 20:07:43Z

From my understanding, you're looking for a zip function, like in python. There's no such built-in in javascript, but it's easy to write, for example:

zip = function() {
    var 
        args = [].slice.call(arguments, 0),
        len = Math.max.apply(Math, args.map(function(x) { return x.length })),
        out = [];
    for (var i = 0; i < len; i++)
        out.push(args.map(function(x) { return x[i] }));
    return out;
}

Applied to your arrays

var arrayOne = ["1a", "1b", "1c"];
var arrayTwo = ["2a", "2b", "2c"];
var arrayThree = ["3a", "3b", "3c"];

zipped = zip(arrayOne, arrayTwo, arrayThree);

this creates a nested array:

[["1a", "2a", "3a"], ["1b", "2b", "3b"], ["1c", "2c", "3c"]]

which you can use as is or convert to a flat one:

 flat = [].concat.apply([], zipped)

Community · Accepted Answer · 2017-05-23 11:50:44Z

2

If the length of the three arrays will always be the same of each other:

var arrayOne = ["1a", "1b", "1c"];
var arrayTwo = ["2a", "2b", "2c"];
var arrayThree = ["3a", "3b", "3c"];

var newArray = [];
for (var i = 0, len = arrayOne.length; i < len; i++) {
    newArray.push(arrayOne[i], arrayTwo[i], arrayThree[i]);
}

console.log(newArray); //1a,2a,3a,1b,2b,3b,1c,2c,3c

But if your arrays won't always be the same length, we will need to use the greatest length of the three arrays and skip missing indexes, so it will be like this:

var arrayOne = ["1a", "1b", "1c", "1d"];
var arrayTwo = ["2a", "2b", "2c"];
var arrayThree = ["3a", "3b"];

var newArray = [];
var len = Math.max(arrayOne.length, arrayTwo.length, arrayThree.length);

for (var i = 0; i < len; i++) {
    if (i in arrayOne) {
        newArray.push(arrayOne[i]);
    }
    if (i in arrayTwo) {
        newArray.push(arrayTwo[i]);
    }
    if (i in arrayThree) {
        newArray.push(arrayThree[i]);
    }
}

console.log(newArray); //1a,2a,3a,1b,2b,3b,1c,2c,1d

The reason to use i in arr (as difference of other checks), is because this will allow you to keep any falsish value 0,"",false,null,undefined,NaN intact. Otherwise it will be very hard to leave them alone (specially undefined values inside your array)

Performance tests between my answer and the currently most upvoted answer

edited May 23, 2017 at 11:50

CommunityBot

11 silver badge

answered Apr 24, 2012 at 19:51

ajax333221

11.9k16 gold badges64 silver badges95 bronze badges

2 Comments

Hristo Over a year ago

this pushes "undefined" if the array lengths differ... consider adding some checks

lazoDev Over a year ago

You post worked with my stuff so thanks; however, it is still returning 1a,1b,1c,2a,2b....and so on for my code. Understand I used the simple question with made up data to try to explain as simple as I could. What you did does work just not how I need it thanks +1

Elias Van Ootegem · Accepted Answer · 2012-04-24 19:57:54Z

1

I'd suggest using the default JS sort() method with a callback of some kind. If the elements if the array are all like /[0-9][a-z]/, this will give you the desired result:

//concat arrays first, of course
function specialSort(a,b)
{
    if(a[1] < b[1])
    {
        return -1;
    }
    if(a[1] > b[1])
    {
        return 1;
    }
    return 0;
}
//using wsanville's expample: combinedArray = ["1a", "1b", "1c", "2a", "2b", "2c", "3a", "3b", "3c"]
combinedArray = combinedArray.sort(specialSort);
//result: combinedArray = ["1a", 2a", "3a", "1b", "2b", "3b", "1c", "2c", "3c"]

Hope this works for you...

answered Apr 24, 2012 at 19:57

Elias Van Ootegem

76.7k10 gold badges123 silver badges160 bronze badges

Comments

Salman Arshad · Accepted Answer · 2012-04-24 20:11:52Z

1

You can simply do:

var arrayOne = ["1a", "1b", "1c"];
var arrayTwo = ["2a", "2b", "2c", "2d", "2e"];
var arrayThree = ["3a", "3b", "3c", "3d"];
var combinedArray = [];

for (var i = 0, j = Math.max(arrayOne.length, arrayTwo.length, arrayThree.length); i < j; i++) {
    if (arrayOne.length) combinedArray.push(arrayOne.shift());
    if (arrayTwo.length) combinedArray.push(arrayTwo.shift());
    if (arrayThree.length) combinedArray.push(arrayThree.shift());
}

alert(combinedArray.join(", "));

This should probably work for variable length arrays. Demo here.

edited Apr 24, 2012 at 20:11

answered Apr 24, 2012 at 20:06

Salman Arshad

274k85 gold badges450 silver badges540 bronze badges

1 Comment

ajax333221 Over a year ago

+1, although that is modifying the original 3 arrays, but this should not be a problem

Collectives™ on Stack Overflow

Combine Arrays in Order JavaScript

5 Answers 5

14 Comments

Comments

2 Comments

Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

5 Answers 5

14 Comments

Comments

2 Comments

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related