What's the fastest way to split an associative Javascript array into two different arrays?

Question

I have an original data array that consists of the following structure (Note: the links are dummy links just for the purpose of this example)...

  var densitySet = [
    { Name: "Node 1", Total: 1000, Link: "http://www.if4it.com" },
    { Name: "Node 2", Total: 1500, Link: "http://www.if4it.com" },
    { Name: "Node 3", Total: 700, Link: "http://www.if4it.com" },
    { Name: "Node 4", Total: 300, Link: "http://www.if4it.com" },
    { Name: "Node 5", Total: 1000, Link: "http://www.if4it.com" },
    { Name: "Node 6", Total: 900, Link: "http://www.if4it.com" },
    { Name: "Node 7", Total: 1090, Link: "http://www.if4it.com" },
    { Name: "Node 8", Total: 35, Link: "http://www.if4it.com" },
    { Name: "Node 9", Total: 1000, Link: "http://www.if4it.com" },
    { Name: "Node 10", Total: 99, Link: "http://www.if4it.com" }
  ];

I'd like to split the above array into two separate arrays, where the first array (called "totalsArray") would consist only of all Names and Totals (i.e. the first and second columns of the original array) and the second array (called "linksArray") would consist of all Names and Links (i.e. the first and third columns).

In other words, when done, the two new arrays would contain the following...

  var totalsArray = [
    { Name: "Node 1", Total: 1000 },
    { Name: "Node 2", Total: 1500 },
    { Name: "Node 3", Total: 700 },
    { Name: "Node 4", Total: 300 },
    { Name: "Node 5", Total: 1000 },
    { Name: "Node 6", Total: 900 },
    { Name: "Node 7", Total: 1090 },
    { Name: "Node 8", Total: 35 },
    { Name: "Node 9", Total: 1000 },
    { Name: "Node 10", Total: 99 }
  ];

  var linksArray = [
    { Name: "Node 1", Link: "http://www.if4it.com" },
    { Name: "Node 2", Link: "http://www.if4it.com" },
    { Name: "Node 3", Link: "http://www.if4it.com" },
    { Name: "Node 4", Link: "http://www.if4it.com" },
    { Name: "Node 5", Link: "http://www.if4it.com" },
    { Name: "Node 6", Link: "http://www.if4it.com" },
    { Name: "Node 7", Link: "http://www.if4it.com" },
    { Name: "Node 8", Link: "http://www.if4it.com" },
    { Name: "Node 9", Link: "http://www.if4it.com" },
    { Name: "Node 10", Link: "http://www.if4it.com" }
  ];

In my real situation, the original array ("densitySet") can be VERY long so my question is: What is the fastest and most efficient way to declare the two new arrays and iterate through the original array to populate them?

My original code looks like:

  var totalsArray = [];
  var linksArray = [];
  for(var i = 0; i < densitySet.length; i++){
    var tempArray1 = {Name: densitySet[i].Name, Total: densitySet[i].Total};
    var tempArray2 = {Name: densitySet[i].Name, Link: densitySet[i].Link};
    totalsArray.push( tempArray1 );
    linksArray.push( tempArray2 );
  };

However, I don't know that this is the FASTEST and most EFFICIENT way to create the two new arrays...

Thanks, in advance, for any help you can offer.

Hi, Because the two new arrays need to be passed into two separate and pre-existing library functions that I'm not allowed to modify. One library function takes the first array and the second library function takes the second array. Those two library functions cannot handle the original array structure, so it has to be split. — Information Technology
– Information Technology, Commented Dec 31, 2013 at 7:15
Are you sure both can't take this single array, considering each item has the right keys? — Blender
– Blender, Commented Dec 31, 2013 at 7:16
No, the two downstream library functions are visualization functions from a library called D3 that work off of count and position, not keys, in order to create HTML elements. — Information Technology
– Information Technology, Commented Dec 31, 2013 at 7:19
Sounds like an XY Problem to me. Why don't you ask a new question and show the code where you use the D3 function, and see if someone has a better idea than cloning the arrays. — Matt Johnson-Pint
– Matt Johnson-Pint, Commented Dec 31, 2013 at 7:35

Blender · Accepted Answer · 2013-12-31 07:44:13Z

3

Avoid doing this if you can, it's slow. A regular for loop is the fastest:

var totals = [];
var links = [];

for (var i = 0; i < densitySet.length; i++) {
    var obj = densitySet[i];

    totals.push({
        Name: obj.Name,
        Total: obj.Total
    });

    links.push({
        Name: obj.Name,
        Link: obj.Link
    });
}

Test it: http://jsperf.com/array-splitting-2

edited Dec 31, 2013 at 7:44

answered Dec 31, 2013 at 7:37

Blender

300k55 gold badges462 silver badges511 bronze badges

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

Comments

Lloyd Banks · Accepted Answer · 2013-12-31 17:30:25Z

1

Create two new arrays and then push your objects into them

var totalsArray = [];
var linksArray = [];

for(var i = 0; i < densitySet.length; i++){
    var temp = {Name: densitySet[i].Name, Total: densitySet[i].Total};
    var anotherTemp = {Name: densitySet[i].Name, Link: densitySet[i].Link};
    totalsArray.push(temp);
    linksArray.push(anotherTemp);
}

edited Dec 31, 2013 at 17:30

answered Dec 31, 2013 at 7:24

Lloyd Banks

36.9k58 gold badges172 silver badges264 bronze badges

4 Comments

Information Technology Over a year ago

Hi Lloyd. Is there a way to avoid the overhead of creating the "var temp" structures, before pushing the data onto the new arrays? (BTW, I would also combine the two for loops, so as not to incur the overhead of two separate loops.)

Matt Johnson-Pint Over a year ago

Wouldn't one pass through the source array be faster than two?

Phrogz Over a year ago

@InformationTechnology The variables are temporary, but the objects are not; there is no waste. Though I would do as Blender has done and push the anonymous objects directly, temporarily assigning a variable to reference them does no harm (to memory or, I posit, speed).

Lloyd Banks Over a year ago

@MattJohnson I wrote the answer, went to sleep, and the exact same thought came to me in my dream

Jake Sellers · Accepted Answer · 2013-12-31 07:25:35Z

0

Something like this?

var totalsArray = new Array();
var linksArray = new Array();
desitySet.forEach(function(elem) {
    totalsArray.push(desired object here);
    linksArray.push(desired object here);
}

elem will be each individual JSON object in the array, and you can create and push new ones from that.

answered Dec 31, 2013 at 7:25

Jake Sellers

2,4492 gold badges24 silver badges41 bronze badges

3 Comments

Blender Over a year ago

forEach is slower than a for loop.

Jake Sellers Over a year ago

use lo-dash then for better speed without the annoying for() loops.

Jake Sellers Over a year ago

An awesome fork off the underscore library: lodash. Really it doesn't matter, the for loops as seen below should work fine, although I would just use one instead of two.

iTzVoko · Accepted Answer · 2022-05-07 11:07:49Z

0

This way is much faster using map higher order function:

var totalsArray = denistySet.map(({Name, Total}) => {
    return {Name, Total};
});

var linksArray = denistySet.map(({Name, Link}) => {
    return {Name, Link};
});

You can read this article: MDN Array Map

answered May 7, 2022 at 11:07

iTzVoko

1771 gold badge2 silver badges11 bronze badges

Collectives™ on Stack Overflow

What's the fastest way to split an associative Javascript array into two different arrays?

4 Answers 4

Comments

4 Comments

3 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

Comments

4 Comments

3 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related