Astro Boogie Astro Boogie - 4 months ago 10
Javascript Question

Identifying edge cases of a one-dimensional array in Javascript

I'm creating a 2-dimensional heat map which has functionality when you click on any pixel. It grabs data associated with the index of every pixel (including adjacent pixels) and plots it. It currently looks like this:

enter image description here

The problem that I'm encountering is when I click on a left or right edge pixel, since it grabs data from adjacent pixels, it can retrieve data from the opposite side of the graph since it is all within a one-dimensional array. I am trying to create a conditional which checks if the clicked pixel is an edge case, and then configures the magnified graph accordingly to not show points from the other side of the main graph. This is the code I have so far:

// pushes all dataMagnified arrays left and right of i to magMainStore
var dataGrabber = function(indexGrabbed, arrayPushed) {

// iterates through all 5 pixels being selected
for (var b = -2; b <= 2; b++) {

var divValue = toString(i / cropLength + b);

// checks if selected index exists, and if it is not in the prior row, or if it is equal to zero
if (dataMagnified[indexGrabbed + b] != undefined && (& divValue.indexOf(".")!=-1)) {
dataMagnified[indexGrabbed + b].forEach(function(z) {
arrayPushed.push(z);
})
}
}
};


I am trying to get the same result as if I had a two dimensional array, and finding when the adjacent values within a single array is undefined. This is the line where I'm creating a conditional for that

if (dataMagnified[indexGrabbed + b] != undefined && (& divValue.indexOf(".")!=-1)) {


The second condition after the and is my attempts so far trying to figure this out. I'm unsure if I can even do this within a for loop that iterates 5 times or if I have to create multiple conditions for this. In addition, here's an image displaying what I'm trying to do:

enter image description here

Thank you!

Answer

So I discovered that since the results of the clicked position would create a variable start and end position in the for loop, the only way to do this was as follows:

I started the same; all the code is nested in one function:

var dataGrabber = function(indexGrabbed, arrayPushed) {

I then create a second function that takes a start and end point as arguments, then passes them as the for loop starting point and ending condition:

var magnifyCondition = function (start, end) {
    for (var b = start; b <= end; b++) {
        if (dataMagnified[indexGrabbed + b] != undefined) {
            dataMagnified[indexGrabbed + b].forEach(function (z) {
                arrayPushed.push(z);
            })
        }
    }
};

After that, I created 5 independent conditional statements since the start and end points can't be easily iterated through:

    if (((indexGrabbed - 1) / cropLength).toString().indexOf(".") == -1) {
        magnifyCondition(-1, 2);
    }
    else if ((indexGrabbed / cropLength).toString().indexOf(".") == -1) {
        magnifyCondition(0, 2);
    }
    else if (((indexGrabbed + 1) / cropLength).toString().indexOf(".") == -1) {
        magnifyCondition(-2, 0);
    }
    else if (((indexGrabbed + 2) / cropLength).toString().indexOf(".") == -1) {
        magnifyCondition(-2, 1);
    }
    else {
        magnifyCondition(-2, 2);
    }
};

Lastly, I pass the index grabbed (i of the on clicked function) and an arbitrary array where the values get stored.

dataGrabber(i, magMainStore);

If there's a better way instead of the if statements, please let me know and I'd be happy to organize it better in the future!