How do I create an Array of Arrays in Javascript?

Question

I've been beating my head at this for a while, so I've finally broken down and decided to ask for input.

I have to construct an object that uses an array of coordinates to outline a map. I've created an Array of Arrays (at least I thought) so I can iterate through the length and create however many objects needed. The problem is, the values in my Array are strings - they're not actually referencing the arrays. The object then gets mad and says it's an invalid parameter.

I tried using split(), but it seems to have had no effect. I've manually input path:boundaries0, and that seems to work just fine. I've been looking at this so long I think I've lost brain cells. If anyone can even just set me on the right path, that'd be awesome.

var arrays = 50; //Set this to how many arrays are created.

var boundariesAr = new Array;
var boundaries = new Array;
for(i=0;i<arrays;){
    boundariesAr.push('boundaries' + i);
    i++;
    };

for(j=0;j<boundariesAr.length;){
    var serviceArea = "serviceArea" + j;
    var currentArray = boundariesAr[j];
    var currentItem = currentArray.split(" ");

    serviceArea = new google.maps.Polygon({
        path:currentItem,
        geodesic:true,
        strokeColor:'#000',
        strokeOpacity:1.0,
        strokeWeight:2,
        fillColor: '#FF0000',
        fillOpacity: 0.35
        });
    serviceArea.setMap(map);
    j++;
    };

EDIT - updated code (only a snippet) This is a truncated look at what the arrays look like:

var boundaries0 = [
new google.maps.LatLng(65.307997,-146.130689),
new google.maps.LatLng(65.291840,-146.198712),
];
var boundaries1 = [
new google.maps.LatLng(64.703884,-147.150958),
new google.maps.LatLng(64.703189,-147.155442),
];


var arrays = 50; //boundaries0[],boundaries1[], etc

var boundariesAr = new Array;

for(var i=0;i<arrays;i++){
    boundariesAr.push(boundaries);
    };
for(var j=0;j<boundariesAr.length;j++){
    var serviceArea = "serviceArea" + j;
    var currentArray = boundariesAr[j];
    var currentItem = currentArray.split(" ");

    serviceArea = new google.maps.Polygon({
        path:currentItem,
        geodesic:true,
        strokeColor:'#000',
        strokeOpacity:1.0,
        strokeWeight:2,
        fillColor: '#FF0000',
        fillOpacity: 0.35
        });
    serviceArea.setMap(map);
    };

Thank you to some fantastic people who took time out of their day to help. I'd buy you drinks if I could.

This finally worked - (and I feel silly for not nesting the arrays to begin with)

var boundaries = [];
boundaries[0] = [
new google.maps.LatLng(65.307997,-146.130689),
new google.maps.LatLng(65.291840,-146.198712),
];
boundaries[1] = [
new google.maps.LatLng(64.703884,-147.150958),
new google.maps.LatLng(64.703189,-147.155442),
];

var arrays = 50; //Set this to how many arrays are created.

for(var j=0;j<arrays;j++){

    serviceArea = new google.maps.Polygon({
        path:boundaries[j],
    geodesic:true,
    strokeColor:'#000',
    strokeOpacity:1.0,
    strokeWeight:2,
    fillColor: '#FF0000',
        fillOpacity: 0.35
    });
serviceArea.setMap(map);
};

Well, 'boundaries' + i (what you pushed to boundariesAr) is a string. What did you expect? — Bergi
– Bergi, Commented Oct 23, 2013 at 17:24

Bucket · Accepted Answer · 2013-10-24 04:32:00Z

3

boundariesAr.push('boundaries' + i) is pushing a string concatenation of "boundaries" and whatever i is in your loop (you're going to end up with 50 strings: "boundaries0" through "boundaries49"). You should change this to push the actual Array object you wanted to push. Oh, and make sure you declare your iterating variable as a non-global variable (by using var) so that i isn't a global variable - this would be very bad.

//                         V---------------here-------------
for(var i = 0; i < arrays; i++){   //                       |
    boundariesAr.push(boundaries); //                       |
    //i++; /*no need for this, just put it in the for loop - */
};

After this, you seem to want to run split() on your array, which will cause you grief. split() is for strings, so you can split a string into an array delimited by whatever character you pass into split(). For example, "Hello I am dog".split(" ") will create the array, ["Hello", "I", "am", "dog"]. But you already have an array, so unless you need to do string manipulation on that array, this line is best removed. (And right now, it seems the array is empty anyway).

Another issue: you set serviceArea to a string, then immediately overwrite it with serviceArea = new google.maps.Polygon({...}). If you want it to be a polygon, there shouldn't be a reason to instantiate it with var serviceArea = "serviceArea" + j;. This will do just fine: var serviceArea = new google.maps.Polygon({...})

edited Oct 24, 2013 at 4:32

answered Oct 23, 2013 at 17:25

Bucket

7,5599 gold badges38 silver badges48 bronze badges

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

4 Comments

Akexis Over a year ago

Your answer is very concise and I appreciate this. I think the empty array was an accidental vestige from an earlier attempt. I actually have 50 arrays being referenced from another document. This is a truncated example: var boundaries49 = [ new google.maps.LatLng(61.070690,-148.828264), new google.maps.LatLng(61.060202,-148.864849), new google.maps.LatLng(61.057867,-148.890671), ]; If I can find a way to loop through all of this, it'd save me a lot of headache. I have 300 of these maps to make.

Bucket Over a year ago

Could you please update your code? And do you still try to push a string instead of an array to your array?

Bucket Over a year ago

Alright, well you're still trying to split() an array, which is bad-wrong. What is your intention with your declaration, var currentItem = currentArray.split(" ");?

Akexis Over a year ago

Sorry, have lots going on at the moment. As many have pointed out, I was pushing strings into the array versus pushing the arrays into the array. <-- If I can solve this, I think I'll be just fine.

nzifnab · Accepted Answer · 2013-10-23 20:01:09Z

Your 'updated code' has this: boundariesAr.push(boundaries); but as far as I can tell, boundaries is undefined?

If you want an array of arrays shouldn't it be something like:

var boundaries = [
  [
    new google.maps.LatLng(65.307997,-146.130689),
    new google.maps.LatLng(65.291840,-146.198712)
  ],
  [
    new google.maps.LatLng(64.703884,-147.150958),
    new google.maps.LatLng(64.703189,-147.155442)
  ]
];

You can also create it in this fashion (if it's easier for you to set them by index):

var boundaries = [];
boundaries[0] = [
  'map thing',
  'map thing 2'
]
boundaries[1] = [
  'more map things',
  'more map things 2',
]

This will make it so that when you do boundaries[0] you get

[
  new google.maps.LatLng(65.307997,-146.130689),
  new google.maps.LatLng(65.291840,-146.198712)
]

Which of course enables you the ability to do boundaries[0][0].

Using new Array to make a new array seems silly. Just use var myThing = [];

After you have an actual multi-dimensional array, you should be able to do this:

for(var j=0;j<boundaries.length;j++){
  for( var b=0; b<boundaries[j].length;b++){
    currentItem = boundaries[j][b];
    // At this point currentItem is `new google.maps.LatLng(65.307997,-146.130689)`
    var serviceArea = new google.maps.Polygon({
      path:currentItem,
      geodesic:true,
      strokeColor:'#000',
      strokeOpacity:1.0,
      strokeWeight:2,
      fillColor: '#FF0000',
      fillOpacity: 0.35
    });
  }
  serviceArea.setMap(map); // Where does `map` come from?
}

If your boundaries are actually a whole bunch of separate arrays boundaries1, boundaries2...boundaries50 then you either need to change them to suck less (put them into an array as I've mentioned here), or you're not going to be able to do what you want. Javascript has no way that I know of (And I've looked thoroughly) to retrieve the value from a variable when you only have the name of the variable as a string.

Basically, you can't dynamically call variables the way you're trying to with "boundaries" + i; or anything similar, there just isn't a way to do it unless you put them into a proper array or object data structure.

Holy crap, this is brilliant. I will test and get back to you. Thank you SO much for taking the time.

Brad Christie · Accepted Answer · 2013-10-23 17:36:03Z

2

boundariesAr.push('boundaries' + i);

That's pushing an element (string) in to the array and not placing another array within the first (as I assume you wish).

To give a straight-forward example of a 10x10 array:

var ary = []; // [] == new Array

for (var i = 0; i < 10; i++){
  ary[i] = []; // add a nested array (2D)
  for (var j = 0; j < 10; j++){
    // add a string within the nested array as an element
    ary[i].push('row' + i + ', col' + j);
  }
}

// debugging -- http://jsfiddle.net/Gv6kP/
console.log(JSON.stringify(ary));

edited Oct 23, 2013 at 17:36

answered Oct 23, 2013 at 17:27

Brad Christie

102k16 gold badges160 silver badges200 bronze badges

Comments

FishBasketGordo · Accepted Answer · 2013-10-23 17:24:45Z

0

This line is your problem:

boundariesAr.push('boundaries' + i);

You are pushing a string onto the array. To push arrays, just do this:

boundariesAr.push([]);

The [] is notation for an array literal.

answered Oct 23, 2013 at 17:24

FishBasketGordo

23.2k4 gold badges60 silver badges92 bronze badges

Collectives™ on Stack Overflow

How do I create an Array of Arrays in Javascript?

4 Answers 4

4 Comments

1 Comment

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

4 Comments

1 Comment

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related