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
This question is related to
javascript
arrays
dynamic
2d
push
One line solution:
var x = 3, y = 4;
var ar = new Array(x).fill(new Array(y).fill(0));
It creates matrix array with values = 0
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"
Create an object and push that object into an array
var jSONdataHolder = function(country, lat, lon) {
this.country = country;
this.lat = lat;
this.lon = lon;
}
var jSONholderArr = [];
jSONholderArr.push(new jSONdataHolder("Sweden", "60", "17"));
jSONholderArr.push(new jSONdataHolder("Portugal", "38", "9"));
jSONholderArr.push(new jSONdataHolder("Brazil", "23", "-46"));
var nObj = jSONholderArr.length;
for (var i = 0; i < nObj; i++) {
console.log(jSONholderArr[i].country + "; " + jSONholderArr[i].lat + "; " +
jSONholderArr[i].lon);
}
You can nest one array within another using the shorthand syntax:
var twoDee = [[]];
An empty array is defined by omitting values, like so:
v=[[],[]]
a=[]
b=[1,2]
a.push(b)
b==a[0]
Matrix m
with size 3 rows and 5 columns (remove .fill(0)
to not init by zero)
[...Array(3)].map(x=>Array(5).fill(0))
let Array2D = (r,c) => [...Array(r)].map(x=>Array(c).fill(0));
let m = Array2D(3,5);
m[1][0] = 2; // second row, first column
m[2][4] = 8; // last row, last column
// print formated array
console.log(JSON.stringify(m)
.replace(/(\[\[)(.*)(\]\])/g,'[\n [$2]\n]').replace(/],/g,'],\n ')
);
_x000D_
const grid = Array.from(Array(3), e => Array(4));
Array.from(arrayLike, mapfn)
mapfn
is called, being passed the value undefined
, returning new Array(4)
.
An iterator is created and the next
value is repeatedly called. The value returned from next
, next().value
is undefined
. This value, undefined
, is then passed to the newly-created array's iterator. Each iteration's value
is undefined
, which you can see if you log it.
var grid2 = Array.from(Array(3), e => {
console.log(e); // undefined
return Array(4); // a new Array.
});
No need to do so much of trouble! Its simple
This will create 2 * 3 matrix of string.
var array=[];
var x = 2, y = 3;
var s = 'abcdefg';
for(var i = 0; i<x; i++){
array[i]=new Array();
for(var j = 0; j<y; j++){
array[i].push(s.charAt(counter++));
}
}
// for 3 x 5 array
new Array(3).fill(new Array(5).fill(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 );} );
If we don’t use ES2015 and don’t have fill(), just use .apply()
See https://stackoverflow.com/a/47041157/1851492
let Array2D = (r, c, fill) => Array.apply(null, new Array(r)).map(function() {return Array.apply(null, new Array(c)).map(function() {return fill})})_x000D_
_x000D_
console.log(JSON.stringify(Array2D(3,4,0)));_x000D_
console.log(JSON.stringify(Array2D(4,5,1)));
_x000D_
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]
I know this is an old thread but I'd like to suggest using an array of objects
rather than an array of arrays
. I think it make the code simpler to understand and update.
// Use meaningful variable names like 'points',
// anything better than a bad pirate joke, 'arr'!
var points = [];
// Create an object literal, then add it to the array
var point = {x: 0, y: 0};
points.push(point);
// Create and add the object to the array in 1 line
points.push({x:5, y:5});
// Create the object from local variables
var x = 10;
var y = 8;
points.push({x, y});
// Ask the user for a point too
var response = prompt("Please enter a coordinate point. Example: 3,8");
var coords = response.split(",").map(Number);
points.push({x: coords[0], y: coords[1]});
// Show the results
var canvas = document.getElementById('graph');
var painter = canvas.getContext("2d");
var width = canvas.width, height = canvas.height;
var scale = 10, radius = 3.5, deg0 = 0, deg360 = 2 * Math.PI;
painter.beginPath();
for (var point of points) {
var x = point.x * scale + scale;
var y = height - point.y * scale - scale;
painter.moveTo(x + radius, y);
painter.arc(x, y, radius, deg0, deg360);
painter.fillText(`${point.x}, ${point.y}`, x + radius + 1, y + radius + 1);
}
painter.stroke();
_x000D_
<canvas id="graph" width="150" height="150" style="border: 1px solid red;"></canvas>
_x000D_
var arr = [];_x000D_
var rows = 3;_x000D_
var columns = 2;_x000D_
_x000D_
for (var i = 0; i < rows; i++) {_x000D_
arr.push([]); // creates arrays in arr_x000D_
}_x000D_
console.log('elements of arr are arrays:');_x000D_
console.log(arr);_x000D_
_x000D_
for (var i = 0; i < rows; i++) {_x000D_
for (var j = 0; j < columns; j++) {_x000D_
arr[i][j] = null; // empty 2D array: it doesn't make much sense to do this_x000D_
}_x000D_
}_x000D_
console.log();_x000D_
console.log('empty 2D array:');_x000D_
console.log(arr);_x000D_
_x000D_
for (var i = 0; i < rows; i++) {_x000D_
for (var j = 0; j < columns; j++) {_x000D_
arr[i][j] = columns * i + j + 1;_x000D_
}_x000D_
}_x000D_
console.log();_x000D_
console.log('2D array filled with values:');_x000D_
console.log(arr);
_x000D_
You can try something like this:-
var arr = new Array([]);
Push data:
arr[0][0] = 'abc xyz';
Source: Stackoverflow.com