We Keep Coding

Javascript 2d array select around from single point

Say I have a 15x15 2d array
[0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
[0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
[0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
[0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
[0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
[0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
[0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
[0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
[0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
[0, 0, 0, 0, A, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
[0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
[0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
[0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
[0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
[0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0]
See the character A? at y:9 and x:4 (index starts with 0).
What I want to do here is to update the array where I select or update the 0s around the A to, say, asterisk (*).
For an example, lets say I want 0s around the A as far as 3 indexes to be updated as *
[0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
[0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
[0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
[0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
[0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
[0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
[0, 0, 0, 0, *, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
[0, 0, 0, *, *, *, 0, 0, 0, 0, 0, 0, 0, 0, 0],
[0, 0, *, *, *, *, *, 0, 0, 0, 0, 0, 0, 0, 0],
[0, *, *, *, A, *, *, *, 0, 0, 0, 0, 0, 0, 0],
[0, 0, *, *, *, *, *, 0, 0, 0, 0, 0, 0, 0, 0],
[0, 0, 0, *, *, *, 0, 0, 0, 0, 0, 0, 0, 0, 0],
[0, 0, 0, 0, *, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
[0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
[0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0]
What is the most efficient way to achieve this?
EDIT
What I've tried:
var s_length = 4, coordinate_y_x = [9, 4]
for (let i1 = 0; i1 < s_length; i1++) {
for (let i = 0; i < s_length; i++) {
if (map[coordinate_y_x[0] - i][coordinate_y_x[1]] != undefined) map[coordinate_y_x[0] - i][coordinate_y_x[1]] = 1
if (map[coordinate_y_x[0]][coordinate_y_x[1] - i]!= undefined) map[coordinate_y_x[0]][coordinate_y_x[1] - i] = 1
}
for (let i = s_length; i > 0; i--) {
console.log("loop2");
if (map[coordinate_y_x[0] + i][coordinate_y_x[1]]!= undefined) map[coordinate_y_x[0] + i][coordinate_y_x[1]] = 1
if (map[coordinate_y_x[0]][coordinate_y_x[1] + i]!= undefined) map[coordinate_y_x[0]][coordinate_y_x[1] + i] = 1
}
}
I managed to change what's left, right, top, and bottom from this code with given point and length, but I can't seem to figure out how to do the rest (between directions)
[0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
[0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
[0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
[0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
[0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
[0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
[0, 0, 0, 0, 1, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
[0, 0, 0, 0, 1, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
[0, 0, 0, 0, 1, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
[0, 1, 1, 1, A, 1, 1, 1, 0, 0, 0, 0, 0, 0, 0],
[0, 0, 0, 0, 1, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
[0, 0, 0, 0, 1, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
[0, 0, 0, 0, 1, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
[0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
[0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0]

One way is with a somewhat spiral matrix walk, but instead of a "square" walk, yours will be diagonal / "diamond" shape. Additionally, we don't really care about the "connectiveness" of the path, so I'll jump around a bit. That is, when a walk has finished a ring, it isn't important that the next ring start on a neighboring cell of the previous ring's last step.
In your example data, I've marked the cells that the algorithm would visit in order (1st, 2nd, 3rd, etc.)
[0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
[0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
[0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
[0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
[0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
[0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
[0, 0, 0, 0, 16, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
[0, 0, 0, 15, 7, 17, 0, 0, 0, 0, 0, 0, 0, 0, 0],
[0, 0, 14, 6, 2, 8, 18, 0, 0, 0, 0, 0, 0, 0, 0],
[0, 13, 5, 1, A, 3, 9, 19, 0, 0, 0, 0, 0, 0, 0],
[0, 0, 24, 12, 4, 10, 20, 0, 0, 0, 0, 0, 0, 0, 0],
[0, 0, 0, 23, 11, 21, 0, 0, 0, 0, 0, 0, 0, 0, 0],
[0, 0, 0, 0, 22, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
[0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
[0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0]
Note, I've chosen to always start from the left side of the origin, but that is arbitrary. You could start from the top, right, or bottom side.
So our three loops (in order) will be
The length we want to "expand" by can be thought of as a separate "ring." So loop each ring.
Next, loop each "side" of that ring.
Finally, loop each "step" along that side.
To keep things symmetric, each side will only occupy a single "corner" cell. So for example when looping the 3rd ring, each side would only be 3 steps each. Here I have each side labeled as a, b, c, and d.
* * * b * * *
* * a * b * *
* a * * * b *
a * * X * * c
* d * * * c *
* * d * c * *
* * * d * * *
Otherwise the only tricky part is figuring out how to change directions as you loop each side.
A very simple way to do this is store "deltas," how much we expect each x and y value (where we currently are) to change for each step. We know we'll be moving 1 step each time, so it is just a matter of moving right / down (positive +) or left / up (negative -).
I decided to store these values in an array, but you can probably do some modulo math to switch between them. Looping over a constant is just a little easier to understand. So moving up and to the right would have an x_delta value of 1 and y_delta value of -1, etc.
Finally, you need a "in bounds" check as you are completing your walk. The algo will still try and "visit" these cells, but won't try to write to the array if it doesn't exist. This is one area of the algo you can probably improve.
Put it all together, and you have this:
const data = Array(15)
.fill()
.map(v => Array(15).fill(0));
// Assumes the graph won't contain `undefined` values. Otherwise, do a `length` check on the arrays
function inBounds(data, [y, x]) {
return data?.[y]?.[x] !== undefined;
}
const deltas = [
[ 1, -1], // Up right
[ 1, 1], // Down right
[-1, 1], // Down left
[-1, -1], // Up left
];
function fillFrom({origin: [oy, ox], data, length, value}) {
// Walk in diamond "rings" around our origin
for (let size = 1; size <= length; size++) {
// Start from the left side of our ring
let x = ox - size;
let y = oy;
// Move along 4 sides of the diamond
for (let [xd, yd] of deltas) {
// Move each step along the side
for (let step = 0; step < size; step++) {
if (inBounds(data, [y, x])) {
data[y][x] = value;
}
x += xd;
y += yd;
}
}
}
return data;
}
// Updates data "in place." Would need to deep clone if you wanted to keep things immutable
fillFrom({origin: [9, 4], data, length: 3, value: 1});
data[9][4] = 'A';
console.log(data.map(r => r.join('')).join('\n'));

Find connected components in javascript 2d matrix

My array maybe looks like this:
var array = [
[1,1,1,1,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0]
[0,0,1,1,1,1,0,0,0,0,0,0,0,0,0,0,0,0,0,0]
[0,0,1,1,1,1,0,0,0,0,0,0,0,0,0,0,0,0,0,0]
[0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0]
[0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0]
[0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0]
[0,0,0,0,0,0,1,1,1,1,1,1,1,0,0,0,0,0,0,0]
[0,0,0,0,0,0,1,1,1,1,1,1,1,0,0,0,0,0,0,0]
[0,0,0,0,0,0,1,1,0,0,0,0,0,0,0,0,0,0,0,0]
[0,0,0,0,0,0,1,1,0,0,0,0,0,0,0,0,0,0,0,0]
[0,0,0,0,0,0,1,1,0,0,0,0,0,0,0,0,0,0,0,0]
[0,0,0,0,0,0,1,1,1,1,1,1,1,0,0,0,0,0,0,0]
[0,0,0,0,0,0,1,1,0,0,0,0,0,0,0,0,0,0,0,0]
[0,0,0,0,0,0,1,1,0,0,0,0,0,0,0,0,0,0,0,0]
[0,0,0,0,0,0,1,1,0,0,0,0,0,0,0,0,0,0,0,0]
[0,0,0,0,0,0,1,1,1,1,1,1,1,0,0,0,0,0,0,0]
[0,0,0,0,0,0,1,1,1,1,1,1,1,0,0,0,1,0,0,0]
[0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,1,1,0,0]
[0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,1,1,1,0,0]
[0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0]
]
I'd like to find all connected components in this 2d matrix like the 'E'-character in the middle, the (lets call it SQUARE) in the left corner above and the other "square" in the right bottom and mark them all with different numbers to get a result like this:
var result = [
[1,1,1,1,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0]
[0,0,1,1,1,1,0,0,0,0,0,0,0,0,0,0,0,0,0,0]
[0,0,1,1,1,1,0,0,0,0,0,0,0,0,0,0,0,0,0,0]
[0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0]
[0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0]
[0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0]
[0,0,0,0,0,0,2,2,2,2,2,2,2,0,0,0,0,0,0,0]
[0,0,0,0,0,0,2,2,2,2,2,2,2,0,0,0,0,0,0,0]
[0,0,0,0,0,0,2,2,0,0,0,0,0,0,0,0,0,0,0,0]
[0,0,0,0,0,0,2,2,0,0,0,0,0,0,0,0,0,0,0,0]
[0,0,0,0,0,0,2,2,0,0,0,0,0,0,0,0,0,0,0,0]
[0,0,0,0,0,0,2,2,2,2,2,2,2,0,0,0,0,0,0,0]
[0,0,0,0,0,0,2,2,0,0,0,0,0,0,0,0,0,0,0,0]
[0,0,0,0,0,0,2,2,0,0,0,0,0,0,0,0,0,0,0,0]
[0,0,0,0,0,0,2,2,0,0,0,0,0,0,0,0,0,0,0,0]
[0,0,0,0,0,0,2,2,2,2,2,2,2,0,0,0,0,0,0,0]
[0,0,0,0,0,0,2,2,2,2,2,2,2,0,0,0,3,0,0,0]
[0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,3,3,0,0]
[0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,3,3,3,0,0]
[0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0]
]
My code that works absolutely well looks like this:
var array = [
[1,1,1,1,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0],
[0,0,1,1,1,1,0,0,0,0,0,0,0,0,0,0,0,0,0,0],
[0,0,1,1,1,1,0,0,0,0,0,0,0,0,0,0,0,0,0,0],
[0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0],
[0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0],
[0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0],
[0,0,0,0,0,0,1,1,1,1,1,1,1,0,0,0,0,0,0,0],
[0,0,0,0,0,0,1,1,1,1,1,1,1,0,0,0,0,0,0,0],
[0,0,0,0,0,0,1,1,0,0,0,0,0,0,0,0,0,0,0,0],
[0,0,0,0,0,0,1,1,0,0,0,0,0,0,0,0,0,0,0,0],
[0,0,0,0,0,0,1,1,0,0,0,0,0,0,0,0,0,0,0,0],
[0,0,0,0,0,0,1,1,1,1,1,1,1,0,0,0,0,0,0,0],
[0,0,0,0,0,0,1,1,0,0,0,0,0,0,0,0,0,0,0,0],
[0,0,0,0,0,0,1,1,0,0,0,0,0,0,0,0,0,0,0,0],
[0,0,0,0,0,0,1,1,0,0,0,0,0,0,0,0,0,0,0,0],
[0,0,0,0,0,0,1,1,1,1,1,1,1,0,0,0,0,0,0,0],
[0,0,0,0,0,0,1,1,1,1,1,1,1,0,0,0,1,0,0,0],
[0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,1,1,0,0],
[0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,1,1,1,0,0],
[0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0]
]
function find_connected_components(array) {
var default_value=1;
function test_connection(array, i, j, value) {
if (array[i] && array[i][j] === -1) {
array[i][j] = value;
test_connection(array, i + 1, j, value);
test_connection(array, i, j + 1, value);
return true;
}
}
array.forEach(function (a) {
a.forEach(function (b, i, bb) {bb[i] = -b;});
});
array.forEach(function (a, i, aa) {
a.forEach(function (b, j, bb) {test_connection(aa, i, j, default_value) && default_value++;});
})
console.log(array.map(a => [a.join('')]).map(a => [a.join('')]))
}
find_connected_components(array)
But- now my error appears until I rotate my array from above. SO that it looks like this:
var error_array = [
[0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0],
[0,0,0,1,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0],
[0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0],
[0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0],
[0,0,0,0,0,0,0,0,1,1,1,1,1,1,1,0,0,0,0,0],
[0,0,0,0,0,0,0,0,1,1,1,1,1,1,1,0,0,0,0,0],
[0,0,0,0,0,0,0,0,0,0,0,0,0,1,1,0,0,0,0,0],
[0,0,0,0,0,0,0,0,0,0,0,0,0,1,1,0,0,0,0,0],
[0,0,0,0,0,0,0,0,0,0,0,0,0,1,1,0,0,0,0,0],
[0,0,0,0,0,0,0,0,1,1,1,1,1,1,1,0,0,0,0,0],
[0,0,0,0,0,0,0,0,0,0,0,0,0,1,1,0,0,0,0,0],
[0,0,0,0,0,0,0,0,0,0,0,0,0,1,1,0,0,0,0,0],
[0,0,0,0,0,0,0,0,0,0,0,0,0,1,1,0,0,0,0,0],
[0,0,0,0,0,0,0,0,1,1,1,1,1,1,1,0,0,0,0,0],
[0,0,0,0,0,0,0,0,1,1,1,1,1,1,1,0,0,0,0,0],
[0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0],
[0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0],
[0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0],
[0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,1,1,1,1,0],
[0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,1,1,1,1,0],
]
The result for the error_array above is completely wrong & I have no clue how to fix this.
PS: I haven't edited a ERROR-array code snippet because my question would be to long. Soo please try the error_array for your own.
And I hope somebody can explain how to fix my code:)
Edit 1 : This is the output for the error_array
Thanks a million in advance!
Greetings jonas

One problem: your test_connection is kind of like a flood fill algorithm, but it only moves to right and down. You need to modify your function to fill up and to the left as well.
It works for the first case pretty well because the "E" shape can be filled correctly when only moving right and down from the top-left point. But when the "E" is flipped (your second case, the recursive call no longer reaches the horizontal bars of the "E".

First, change the value of 1 to -1, because you need to use 1 as flag.
Then you could iterate the elements and perform a check and if it has the flag -1, then change it to the actual value. Proceed with the element of the right and bottom.
If an element was found, increment value.
function test(array, i, j, value) {
if (array[i] && array[i][j] === -1) {
array[i][j] = value;
test(array, i -1, j, value);
test(array, i + 1, j, value);
test(array, i, j - 1, value);
test(array, i, j + 1, value);
return true;
}
}
var data = [[1, 1, 1, 1, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0], [0, 0, 1, 1, 1, 1, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0], [0, 0, 1, 1, 1, 1, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0], [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0], [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0], [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0], [0, 0, 0, 0, 0, 0, 1, 1, 1, 1, 1, 1, 1, 0, 0, 0, 0, 0, 0, 0], [0, 0, 0, 0, 0, 0, 1, 1, 1, 1, 1, 1, 1, 0, 0, 0, 0, 0, 0, 0], [0, 0, 0, 0, 0, 0, 1, 1, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0], [0, 0, 0, 0, 0, 0, 1, 1, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0], [0, 0, 0, 0, 0, 0, 1, 1, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0], [0, 0, 0, 0, 0, 0, 1, 1, 1, 1, 1, 1, 1, 0, 0, 0, 0, 0, 0, 0], [0, 0, 0, 0, 0, 0, 1, 1, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0], [0, 0, 0, 0, 0, 0, 1, 1, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0], [0, 0, 0, 0, 0, 0, 1, 1, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0], [0, 0, 0, 0, 0, 0, 1, 1, 1, 1, 1, 1, 1, 0, 0, 0, 0, 0, 0, 0], [0, 0, 0, 0, 0, 0, 1, 1, 1, 1, 1, 1, 1, 0, 0, 0, 1, 0, 0, 0], [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 1, 1, 0, 0], [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 1, 1, 1, 0, 0], [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0]],
value = 1;
data.forEach(function (a) {
a.forEach(function (b, i, bb) {
bb[i] = -b;
});
});
data.forEach(function (a, i, aa) {
a.forEach(function (b, j, bb) {
test(aa, i, j, value) && value++;
});
});
document.getElementById('out').innerHTML = data.map(function (a) { return a.join(' '); }).join('\n');
<pre id="out"></pre>

How to display arrays as visuals in Javascript (e.g. for a maze)

So, I am making a maze, in javascript. I do not know how to display an array (such as 1's and 0's) graphically. The best way is to show you the code:
var maze= [
[0,0,0,1,0,0,0,1,0,0,0,1,0,0,0,0,1,0,0,0],
[0,0,0,1,0,0,0,1,0,0,0,1,0,0,0,0,1,0,0,1],
[0,0,1,1,1,0,0,1,1,0,0,1,0,0,0,0,1,0,0,1],
[0,0,1,0,1,0,0,1,1,0,0,1,0,0,0,0,1,0,0,1],
[0,0,1,0,1,1,0,1,0,0,0,1,1,1,0,0,1,0,0,0],
[0,0,1,1,0,1,1,0,0,0,0,0,0,1,0,0,1,1,1,1],
[0,0,0,1,1,0,1,1,1,1,1,1,0,0,0,0,0,1,0,1],
[0,0,0,0,0,0,0,0,1,0,0,1,0,0,0,0,0,0,0,0],
[0,0,0,0,0,0,0,0,1,0,0,1,0,0,0,0,0,0,0,0],
[0,0,0,0,0,0,0,0,0,0,0,2,0,0,0,0,0,0,0,1],
];
With the 0's representing walls, and the 1's representing empty space, and 2 meaning the end of the maze, how can I display this as a maze using only javascript? Shall I make each 0 an individual rectangle? How can I do this?
Please do not make fun as I am just starting out.
Here is the code for reference (this is on "coding with chrome", as it was the easiest to use, as I did not have to import anything).
//PART 1 : THE CHARACTER
//Where is the character???
charX=10;
charY=10;
//Draw char
function drawChar(){
draw.circle(charX, charY, 5, "black");
}
//Loop happens at 40 milliseconds
setInterval (loop, 40);
//loop that clears screen
function loop(){
draw.rectangle(0,0, window.innerWidth, window.innerHeight,"white");
drawChar();
}
//Move Character
document.addEventListener("keydown", moveChar);
function moveChar (e) {
if(e.keyCode ==37){
//Left arrow
charX=charX-50;
}
if(e.keyCode== 38){
//Up arrow
charY=charY-50;
}
if(e.keyCode == 39){
//right arrow
charX=charX+50;
}
if(e.keyCode == 40){
//down arrow
charY=charY +50;
}
//PART 1 DONE :-)
//PART 2: Walls
//map of maze
var maze= [
[0,0,0,1,0,0,0,1,0,0,0,1,0,0,0,0,1,0,0,0],
[0,0,0,1,0,0,0,1,0,0,0,1,0,0,0,0,1,0,0,1],
[0,0,1,1,1,0,0,1,1,0,0,1,0,0,0,0,1,0,0,1],
[0,0,1,0,1,0,0,1,1,0,0,1,0,0,0,0,1,0,0,1],
[0,0,1,0,1,1,0,1,0,0,0,1,1,1,0,0,1,0,0,0],
[0,0,1,1,0,1,1,0,0,0,0,0,0,1,0,0,1,1,1,1],
[0,0,0,1,1,0,1,1,1,1,1,1,0,0,0,0,0,1,0,1],
[0,0,0,0,0,0,0,0,1,0,0,1,0,0,0,0,0,0,0,0],
[0,0,0,0,0,0,0,0,1,0,0,1,0,0,0,0,0,0,0,0],
[0,0,0,0,0,0,0,0,0,0,0,2,0,0,0,0,0,0,0,1],
];
//How can we display this graphically, with the 0 being a wall, and 1 being an empty space?

span {
white-space: pre;
display: inline-block;
width: 24px;
}
<script>
var maze = [
[0, 0, 0, 1, 0, 0, 0, 1, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0],
[0, 0, 0, 1, 0, 0, 0, 1, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 1],
[0, 0, 1, 1, 1, 0, 0, 1, 1, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 1],
[0, 0, 1, 0, 1, 0, 0, 1, 1, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 1],
[0, 0, 1, 0, 1, 1, 0, 1, 0, 0, 0, 1, 1, 1, 0, 0, 1, 0, 0, 0],
[0, 0, 1, 1, 0, 1, 1, 0, 0, 0, 0, 0, 0, 1, 0, 0, 1, 1, 1, 1],
[0, 0, 0, 1, 1, 0, 1, 1, 1, 1, 1, 1, 0, 0, 0, 0, 0, 1, 0, 1],
[0, 0, 0, 0, 0, 0, 0, 0, 1, 0, 0, 1, 0, 0, 0, 0, 0, 0, 0, 0],
[0, 0, 0, 0, 0, 0, 0, 0, 1, 0, 0, 1, 0, 0, 0, 0, 0, 0, 0, 0],
[0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 2, 0, 0, 0, 0, 0, 0, 0, 1],
];
maze.forEach(function(arr, index) {
arr.forEach(function(path, i) {
var span = document.createElement("span");
if (path === 0) {
span.textContent = " ";
span.style.backgroundColor = "#000";
}
if (path === 1) {
span.textContent = " ";
span.style.backgroundColor = "yellow";
}
if (path === 2) {
span.textContent = "end";
span.style.backgroundColor = "green";
span.style.color = "gold";
}
document.body.appendChild(span)
});
document.body.appendChild(document.createElement("br"))
})
</script>

Convert text file in to 2d javascript array using ajax & php

So, I'm building myself a browser based rpg using Javascript. Originally, my level had a single layer and was loaded from a javascript 2d map array. However, I'm changing my code to allow support for multiple layers loaded from a file.
I can retrieve the file data without too many problems, however, I have no idea how to parse the information into useable arrays.
The contents of my text file are as follows;
LAYER
0, 0, 0, 0, 0
0, 0, 0, 0, 0
0, 0, 0, 0, 0
0, 0, 0, 0, 0
0, 0, 0, 0, 0
LAYER
0, 0, 0, 0, 0
0, 0, 0, 0, 0
0, 0, 0, 0, 0
0, 0, 0, 0, 0
0, 0, 0, 0, 0
My Ajax and PHP for retrieving the level;
// JAVASCRIPT
$.ajax({
type: 'POST',
url: 'lib/ajax.php',
data: {method: 'getLevel'},
success: function(data){
},
error: function(x, h, r){
console.log(x, h, r);
}
})
// PHP FILE 2
public function getLevel(){
$file = file_get_contents('../levels/level1.txt');
echo $file;
}
There is an intermediate file handling all of my ajax requests, passing them to a functions class.
I can get my level data fine, I just don't know what to do with it once I have it.
I know I can get someway towards achieving this by adding newline characters at the end of each group, and parsing them that way. However, this will become a nightmare when implementing a tile editor in the future. Do you guys have any suggestions how to go about this? Would you suggest parsing at the php or javascript level, or both?

If you data is following this layout
LAYER
0, 0, 0, 0, 0
0, 0, 0, 0, 0
0, 0, 0, 0, 0
0, 0, 0, 0, 0
0, 0, 0, 0, 0
LAYER2
0, 0, 0, 0, 0
0, 0, 0, 0, 0
0, 0, 0, 0, 0
0, 0, 0, 0, 0
0, 0, 0, 0, 0
You can just do it like this
function parseLayer($text){
$layers = array();
$lines = explode("\n", $text);
$lastLayer;
$currArray = array();
foreach($lines as $line){
if(strpos($line, ",") === false){
if(!empty($lastLayer)){
$layers[$lastLayer] = $currArray;
$currArray = array();
}
$lastLayer = trim($line);
}else{
$nodes = explode(",", $line);
$nodeList = array();
foreach($nodes as $node){
$nodeList[] = trim($node);
}
$currArray[] = $nodeList;
}
$layers[$lastLayer] = $currArray;
}
return $layers;
}
Then to pass it to Javascript you can use JSON for php json_encode
Since #Mike is on his phone here is the code for you:
{"LAYER":[
[0, 0, 0, 0, 0],
[0, 0, 0, 0, 0],
[0, 0, 0, 0, 0],
[0, 0, 0, 0, 0],
[0, 0, 0, 0, 0]
],
"LAYER2":[
[0, 0, 0, 0, 0],
[0, 0, 0, 0, 0],
[0, 0, 0, 0, 0],
[0, 0, 0, 0, 0],
[0, 0, 0, 0, 0]
]
}

Convert json string to array format, that can be use to chart data [closed]

Closed. This question is not reproducible or was caused by typos. It is not currently accepting answers.
This question was caused by a typo or a problem that can no longer be reproduced. While similar questions may be on-topic here, this one was resolved in a way less likely to help future readers.
Closed 8 years ago.
Improve this question
Actual data :
var x =" [{ name: 'Chintan test', data: [3, 0, 0, 0, 0, 0, 2, 2, 0, 0, 0, 0, 0, 0] },
{ name: 'Lara Black &White', data: [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0] },
{ name: 'kamlesh ', data: [1, 2, 0, 0, 0, 0, 3, 0, 0, 0, 0, 0, 0, 0] }, { name: 'Gopala lalalala', data: [1, 2, 0, 0, 0, 0, 3, 0, 0, 0, 0, 0, 0, 0] },
{ name: 'Saurin Test ', data: [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0] }]";
how to convert so i can get below result :
var y = [{ name: 'Chintan test', data: [3, 0, 0, 0, 0, 0, 2, 2, 0, 0, 0, 0, 0, 0] },
{ name: 'Lara Black &White', data: [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0] },
{ name: 'kamlesh ', data: [1, 2, 0, 0, 0, 0, 3, 0, 0, 0, 0, 0, 0, 0] }, { name: 'Gopala lalalala', data: [1, 2, 0, 0, 0, 0, 3, 0, 0, 0, 0, 0, 0, 0] },
{ name: 'Saurin Test ', data: [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0] }]
What I had Done :
try 1 :
y=x.substring(1,x.length-1); // not helpfull
try 2 :
y = JSON.parse(x); // SyntaxError: JSON.parse: expected property name or '}' at line 1 column 5 of the JSON data

The string is not valid JSON (you can check it here http://jsonlint.com/), so in order to parse it you first need to transform it in a valid JSON.
To make it a valid JSON the attribute names should be encapsulated by double quotes (name: => "name":) and the same goes for the strings ('Chintan test' => "Chintan test"). You can do this with a few string replace:
var x =" [{ name: 'Chintan test', data: [3, 0, 0, 0, 0, 0, 2, 2, 0, 0, 0, 0, 0, 0] }, { name: 'Lara Black &White', data: [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0] }, { name: 'kamlesh ', data: [1, 2, 0, 0, 0, 0, 3, 0, 0, 0, 0, 0, 0, 0] }, { name:'Gopala lalalala', data: [1, 2, 0, 0, 0, 0, 3, 0, 0, 0, 0, 0, 0, 0] }, { name: 'Saurin Test ', data: [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0] }]";
x = x.replace(/data:/g, '"data":'); //name attribute data to "data"
x = x.replace(/name:/g, '"name":'); //name attribute name to "name"
x = x.replace(/:\s*'(.+?)'/g, ':"$1"'); // :'string' to :"string"
var y = JSON.parse(x);
Note that the string inside x should not contain new lines.
The jsfiddle working example: http://jsfiddle.net/jx3opp8g/

This is not valid JSON mostly because JSON requires that the property names be surrounded by quotes. Once you add quotes around the property names, then it looks like it should be parse able.