I want to create a two dimensional array in Javascript where I'm going to store coordinates (x,y). I don't know yet how many pairs of coordinates I will have because they will be dynamically generated by user input.
Example of pre-defined 2d array:
var Arr=[[1,2],[3,4],[5,6]];
I guess I can use the PUSH method to add a new record at the end of the array.
How do I declare an empty two dimensional array so that when I use my first Arr.push() it will be added to the index 0, and every next record written by push will take the next index?
This is probably very easy to do, I'm just a newbie with JS, and I would appreciate if someone could write a short working code snippet that I could examine. Thanks
You can just declare a regular array like so:
var arry = [];
Then when you have a pair of values to add to the array, all you need to do is:
arry.push([value_1, value2]);
And yes, the first time you call arry.push
, the pair of values will be placed at index 0.
From the nodejs repl:
> var arry = [];
undefined
> arry.push([1,2]);
1
> arry
[ [ 1, 2 ] ]
> arry.push([2,3]);
2
> arry
[ [ 1, 2 ], [ 2, 3 ] ]
Of course, since javascript is dynamically typed, there will be no type checker enforcing that the array remains 2 dimensional. You will have to make sure to only add pairs of coordinates and not do the following:
> arry.push(100);
3
> arry
[ [ 1, 2 ],
[ 2, 3 ],
100 ]
If you want to be able access the matrix like so
matrix[i][j]
I find it the most convinient to init it in a loop.
var matrix = [],
cols = 3;
//init the grid matrix
for ( var i = 0; i < cols; i++ ) {
matrix[i] = [];
}
this will give you
[ [], [], [] ]
so
matrix[0][0]
matrix[1][0]
return undefined and not the error "Uncaught TypeError: Cannot set property '0' of undefined"
If you want to initialize along with the creation, you can use fill and map.
const matrix = new Array(5).fill(0).map(() => new Array(4).fill(0));
5 is the number of rows and 4 is the number of columns.
An empty array is defined by omitting values, like so:
v=[[],[]]
a=[]
b=[1,2]
a.push(b)
b==a[0]
ES6
Matrix m
with size 3 rows and 5 columns:
[...Array(3)].map(x=>Array(5).fill(0))
result:
[
[0, 0, 0, 0, 0],
[0, 0, 0, 0, 0],
[0, 0, 0, 0, 0]
]
Remove .fill(0)
to not init by zero. Setting data: m[2][4] = 8
(last element)
// Bonus - helper function:
// let Array2D = (r,c) => [...Array(r)].map(x=>Array(c).fill(0));
// usage: let b = Array2D(5,7);
What's wrong with
var arr2 = new Array(10,20);
arr2[0,0] = 5;
arr2[0,1] = 2
console.log("sum is " + (arr2[0,0] + arr2[0,1]))
should read out "sum is 7"
You can fill an array with arrays using a function:
var arr = [];
var rows = 11;
var columns = 12;
fill2DimensionsArray(arr, rows, columns);
function fill2DimensionsArray(arr, rows, columns){
for (var i = 0; i < rows; i++) {
arr.push([0])
for (var j = 0; j < columns; j++) {
arr[i][j] = 0;
}
}
}
The result is:
Array(11)
0:(12) [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0]
1:(12) [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0]
2:(12) [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0]
3:(12) [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0]
4:(12) [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0]
5:(12) [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0]
6:(12) [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0]
7:(12) [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0]
8:(12) [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0]
9:(12) [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0]
10:(12)[0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0]
We usually know the number of columns but maybe not rows (records). Here is an example of my solution making use of much of the above here. (For those here more experienced in JS than me - pretty much everone - any code improvement suggestions welcome)
var a_cols = [null,null,null,null,null,null,null,null,null];
var a_rxc = [[a_cols]];
// just checking var arr = a_rxc.length ; //Array.isArray(a_rxc);
// alert ("a_rxc length=" + arr) ; Returned 1
/* Quick test of array to check can assign new rows to a_rxc.
i can be treated as the rows dimension and j the columns*/
for (i=0; i<3; i++) {
for (j=0; j<9; j++) {
a_rxc[i][j] = i*j;
alert ("i=" + i + "j=" + j + " " + a_rxc[i][j] );
}
if (i+1<3) { a_rxc[i+1] = [[a_cols]]; }
}
And if passing this array to the sever the ajax that works for me is
$.post("../ajax/myservercode.php",
{
jqArrArg1 : a_onedimarray,
jqArrArg2 : a_rxc
},
function(){ },"text" )
.done(function(srvresp,status) { $("#id_PageContainer").html(srvresp);} )
.fail(function(jqXHR,status) { alert("jqXHR AJAX error " + jqXHR + ">>" + status );} );