correctly create object with data

Question

I have a loop where i iterate over the pixel data received from the method getImageData(). There I find the coordinates for each pixel (coordX and coordY). Then I filter the pixels depending on the color and I want to push the pixels I need into the object in the following way:

result.coords[coordX][coordY].counted

If with numbers, then like this:

result.coords = {
  1: {
    1: {
      counted: false,
    },
    2: {
      counted: false,
    },
  },
  2: {
    5: {
      counted: false,
    },
    8: {
      counted: false,
    },
    9: {
      counted: false,
    },
  },
};

I did this but there are problems:

var result = {
        coords: {},
    },
    pixel = new app.Color(),
    array = {},
    coordX,
    coordY,
    i;

for (i = 0; options.imageData && i < options.imageData.data.length; i += 4) {
    pixel.x = options.imageData.data[i];
    pixel.y = options.imageData.data[i + 1];
    pixel.z = options.imageData.data[i + 2];
    pixel.a = options.imageData.data[i + 3];
    coordX = (i / 4) % options.imageData.width;
    coordY = Math.floor(i / 4 / options.imageData.width);

    // Pixel filter by color
    if (pixel.x == 255 && pixel.a == 255) {
        array[coordY] = {
            counted: false,
        };

        result.coords[coordX] = array;
        // .. next is the code that is not important ..
    }
}

Problem of the following type: when I push a new Y coordinate, it is added to the array for all X. But I may have cases when, for example, the Y=5 coordinate will not be at the X=1 coordinate, but only at X=2 (as in example above). But in my case Y=5 will also be added to X=1.

Please tell me how to correctly create an object with property 'coords', in which there will be properties X, in which all Y related to it will be stored, in which there will also be property 'counted' with value False.

Edit:

I did like this:

data = {};
if (pixel.x == 255 && pixel.a == 255) {
    if (result.coords[coordX]) {
        for (var item in result.coords[coordX]) {
            data[item] = result.coords[coordX][item];
        }
    }

    data[coordY] = {
        counted: false,
    };
    
    result.coords[coordX] = data;
    data= {};
}

Answer 1

Given an i, the OP computes coordX and coordY. What's needed is something like an inverse to produce a key for the counting data structure.

const width = options.imageData.width;

function keyForXY(x, y) {
  return y * width + x
}

function setValueAtXY(object, x, y, value) {
  const key = keyForXY(x,y);
  object[key] = value;
}

function getValueAtXY(object, x, y) {
  const key = keyForXY(x,y);
  return object[key];
}

Replace your data structure access with these, like...

if (pixel.x == 255 && pixel.a == 255) {
  setValueAtXY(array, coordX, coordY, { counted: false });
  setValueAtXY(result.coords, coordX, coordY, array);
}

Note that I'm not sure exactly what's happening in the OP semantically... why for example we're placing a bool in an object or how "array" and "result.coords" relate to each other, so I'm not endorsing any of that, just mapping the OP logic into a more appropriate (seeming) data structure.