I am trying to find and change a item that is inside of an array of arrays.

My array is like that:

const matriz = [
  [
    {
      codigo: 1,
      imagem: 1,
      clicou: false,
    },
    {
      codigo: 2,
      imagem: 2,
      clicou: false,
    },
    {
      codigo: 3,
      imagem: 3,
      clicou: false,
    },
    {
      codigo: 4,
      imagem: 4,
      clicou: false,
    },
    {
      codigo: 5,
      imagem: 5,
      clicou: false,
    },
    {
      codigo: 6,
      imagem: 1,
      clicou: false,
    },
    {
      codigo: 7,
      imagem: 2,
      clicou: false,
    },
    {
      codigo: 8,
      imagem: 3,
      clicou: false,
    },
    {
      codigo: 9,
      imagem: 4,
      clicou: false,
    },
    {
      codigo: 10,
      imagem: 5,
      clicou: false,
    },
  ],
  [
    {
      codigo: 11,
      imagem: 1,
      clicou: false,
    },
    {
      codigo: 12,
      imagem: 2,
      clicou: false,
    },
    {
      codigo: 13,
      imagem: 3,
      clicou: false,
    },
    {
      codigo: 14,
      imagem: 4,
      clicou: false,
    },
    {
      codigo: 15,
      imagem: 5,
      clicou: false,
    },
    {
      codigo: 16,
      imagem: 1,
      clicou: false,
    },
    {
      codigo: 17,
      imagem: 2,
      clicou: false,
    },
    {
      codigo: 18,
      imagem: 3,
      clicou: false,
    },
    {
      codigo: 19,
      imagem: 4,
      clicou: false,
    },
    {
      codigo: 20,
      imagem: 5,
      clicou: false,
    },
  ],
  [
    {
      codigo: 21,
      imagem: 1,
      clicou: false,
    },
    {
      codigo: 22,
      imagem: 2,
      clicou: false,
    },
    {
      codigo: 23,
      imagem: 3,
      clicou: false,
    },
    {
      codigo: 24,
      imagem: 4,
      clicou: false,
    },
    {
      codigo: 25,
      imagem: 5,
      clicou: false,
    },
    {
      codigo: 26,
      imagem: 1,
      clicou: false,
    },
    {
      codigo: 27,
      imagem: 2,
      clicou: false,
    },
    {
      codigo: 28,
      imagem: 3,
      clicou: false,
    },
    {
      codigo: 29,
      imagem: 4,
      clicou: false,
    },
    {
      codigo: 30,
      imagem: 5,
      clicou: false,
    },
  ],
  [
    {
      codigo: 31,
      imagem: 1,
      clicou: false,
    },
    {
      codigo: 32,
      imagem: 2,
      clicou: false,
    },
    {
      codigo: 33,
      imagem: 3,
      clicou: false,
    },
    {
      codigo: 34,
      imagem: 4,
      clicou: false,
    },
    {
      codigo: 35,
      imagem: 5,
      clicou: false,
    },
    {
      codigo: 36,
      imagem: 1,
      clicou: false,
    },
    {
      codigo: 37,
      imagem: 2,
      clicou: false,
    },
    {
      codigo: 38,
      imagem: 3,
      clicou: false,
    },
    {
      codigo: 39,
      imagem: 4,
      clicou: false,
    },
    {
      codigo: 40,
      imagem: 5,
      clicou: false,
    },
  ],
  [
    {
      codigo: 41,
      imagem: 1,
      clicou: false,
    },
    {
      codigo: 42,
      imagem: 2,
      clicou: false,
    },
    {
      codigo: 43,
      imagem: 3,
      clicou: false,
    },
    {
      codigo: 44,
      imagem: 4,
      clicou: false,
    },
    {
      codigo: 45,
      imagem: 5,
      clicou: false,
    },
    {
      codigo: 46,
      imagem: 1,
      clicou: false,
    },
    {
      codigo: 47,
      imagem: 2,
      clicou: false,
    },
    {
      codigo: 48,
      imagem: 3,
      clicou: false,
    },
    {
      codigo: 49,
      imagem: 4,
      clicou: false,
    },
    {
      codigo: 50,
      imagem: 5,
      clicou: false,
    },
  ],
  [
    {
      codigo: 51,
      imagem: 1,
      clicou: false,
    },
    {
      codigo: 52,
      imagem: 2,
      clicou: false,
    },
    {
      codigo: 53,
      imagem: 3,
      clicou: false,
    },
    {
      codigo: 54,
      imagem: 4,
      clicou: false,
    },
    {
      codigo: 55,
      imagem: 5,
      clicou: false,
    },
    {
      codigo: 56,
      imagem: 1,
      clicou: false,
    },
    {
      codigo: 57,
      imagem: 2,
      clicou: false,
    },
    {
      codigo: 58,
      imagem: 3,
      clicou: false,
    },
    {
      codigo: 59,
      imagem: 4,
      clicou: false,
    },
    {
      codigo: 60,
      imagem: 5,
      clicou: false,
    },
  ],
  [
    {
      codigo: 61,
      imagem: 1,
      clicou: false,
    },
    {
      codigo: 62,
      imagem: 2,
      clicou: false,
    },
    {
      codigo: 63,
      imagem: 3,
      clicou: false,
    },
    {
      codigo: 64,
      imagem: 4,
      clicou: false,
    },
    {
      codigo: 65,
      imagem: 5,
      clicou: false,
    },
    {
      codigo: 66,
      imagem: 1,
      clicou: false,
    },
    {
      codigo: 67,
      imagem: 2,
      clicou: false,
    },
    {
      codigo: 68,
      imagem: 3,
      clicou: false,
    },
    {
      codigo: 69,
      imagem: 4,
      clicou: false,
    },
    {
      codigo: 70,
      imagem: 5,
      clicou: false,
    },
  ],
  [
    {
      codigo: 71,
      imagem: 1,
      clicou: false,
    },
    {
      codigo: 72,
      imagem: 2,
      clicou: false,
    },
    {
      codigo: 73,
      imagem: 3,
      clicou: false,
    },
    {
      codigo: 74,
      imagem: 4,
      clicou: false,
    },
    {
      codigo: 75,
      imagem: 5,
      clicou: false,
    },
    {
      codigo: 76,
      imagem: 1,
      clicou: false,
    },
    {
      codigo: 77,
      imagem: 2,
      clicou: false,
    },
    {
      codigo: 78,
      imagem: 3,
      clicou: false,
    },
    {
      codigo: 79,
      imagem: 4,
      clicou: false,
    },
    {
      codigo: 80,
      imagem: 5,
      clicou: false,
    },
  ],
  [
    {
      codigo: 81,
      imagem: 1,
      clicou: false,
    },
    {
      codigo: 82,
      imagem: 2,
      clicou: false,
    },
    {
      codigo: 83,
      imagem: 3,
      clicou: false,
    },
    {
      codigo: 84,
      imagem: 4,
      clicou: false,
    },
    {
      codigo: 85,
      imagem: 5,
      clicou: false,
    },
    {
      codigo: 86,
      imagem: 1,
      clicou: false,
    },
    {
      codigo: 87,
      imagem: 2,
      clicou: false,
    },
    {
      codigo: 88,
      imagem: 3,
      clicou: false,
    },
    {
      codigo: 89,
      imagem: 4,
      clicou: false,
    },
    {
      codigo: 90,
      imagem: 5,
      clicou: false,
    },
  ],
  [
    {
      codigo: 91,
      imagem: 1,
      clicou: false,
    },
    {
      codigo: 92,
      imagem: 2,
      clicou: false,
    },
    {
      codigo: 93,
      imagem: 3,
      clicou: false,
    },
    {
      codigo: 94,
      imagem: 4,
      clicou: false,
    },
    {
      codigo: 95,
      imagem: 5,
      clicou: false,
    },
    {
      codigo: 96,
      imagem: 1,
      clicou: false,
    },
    {
      codigo: 97,
      imagem: 2,
      clicou: false,
    },
    {
      codigo: 98,
      imagem: 3,
      clicou: false,
    },
    {
      codigo: 99,
      imagem: 4,
      clicou: false,
    },
    {
      codigo: 100,
      imagem: 5,
      clicou: false,
    },
  ],
]

The way i'm doing it now is using a forEach:

matriz.forEach((x) => {
  let achou = false;
  // console.log("x: ", x, id)
  // console.log("typeof(x): ", typeof x)
  x.forEach((y) => {
    if (y.codigo === id) {
      // Realizo a inversão do booleano
      y.clicou = !y.clicou;
      console.log('y: ', y);
      achou = true;
      throw BreakException;
    }
  });
  if (achou) {
    throw BreakException;
  }
});

The problem is that I can't stop the loop and I believe there must be a better way, maybe using the 'find' command.

I can do this with find when it is a single array.

CodePudding user response：

I would recommend using a for loop to iterate over the array and using Array.find to find the item in the nested arrays, then using a break statement to terminate the loop:

const matriz=[[{codigo:1,imagem:1,clicou:!1},{codigo:2,imagem:2,clicou:!1},{codigo:3,imagem:3,clicou:!1},{codigo:4,imagem:4,clicou:!1},{codigo:5,imagem:5,clicou:!1},{codigo:6,imagem:1,clicou:!1},{codigo:7,imagem:2,clicou:!1},{codigo:8,imagem:3,clicou:!1},{codigo:9,imagem:4,clicou:!1},{codigo:10,imagem:5,clicou:!1}],[{codigo:11,imagem:1,clicou:!1},{codigo:12,imagem:2,clicou:!1},{codigo:13,imagem:3,clicou:!1},{codigo:14,imagem:4,clicou:!1},{codigo:15,imagem:5,clicou:!1},{codigo:16,imagem:1,clicou:!1},{codigo:17,imagem:2,clicou:!1},{codigo:18,imagem:3,clicou:!1},{codigo:19,imagem:4,clicou:!1},{codigo:20,imagem:5,clicou:!1}],[{codigo:21,imagem:1,clicou:!1},{codigo:22,imagem:2,clicou:!1},{codigo:23,imagem:3,clicou:!1},{codigo:24,imagem:4,clicou:!1},{codigo:25,imagem:5,clicou:!1},{codigo:26,imagem:1,clicou:!1},{codigo:27,imagem:2,clicou:!1},{codigo:28,imagem:3,clicou:!1},{codigo:29,imagem:4,clicou:!1},{codigo:30,imagem:5,clicou:!1}],[{codigo:31,imagem:1,clicou:!1},{codigo:32,imagem:2,clicou:!1},{codigo:33,imagem:3,clicou:!1},{codigo:34,imagem:4,clicou:!1},{codigo:35,imagem:5,clicou:!1},{codigo:36,imagem:1,clicou:!1},{codigo:37,imagem:2,clicou:!1},{codigo:38,imagem:3,clicou:!1},{codigo:39,imagem:4,clicou:!1},{codigo:40,imagem:5,clicou:!1}],[{codigo:41,imagem:1,clicou:!1},{codigo:42,imagem:2,clicou:!1},{codigo:43,imagem:3,clicou:!1},{codigo:44,imagem:4,clicou:!1},{codigo:45,imagem:5,clicou:!1},{codigo:46,imagem:1,clicou:!1},{codigo:47,imagem:2,clicou:!1},{codigo:48,imagem:3,clicou:!1},{codigo:49,imagem:4,clicou:!1},{codigo:50,imagem:5,clicou:!1}],[{codigo:51,imagem:1,clicou:!1},{codigo:52,imagem:2,clicou:!1},{codigo:53,imagem:3,clicou:!1},{codigo:54,imagem:4,clicou:!1},{codigo:55,imagem:5,clicou:!1},{codigo:56,imagem:1,clicou:!1},{codigo:57,imagem:2,clicou:!1},{codigo:58,imagem:3,clicou:!1},{codigo:59,imagem:4,clicou:!1},{codigo:60,imagem:5,clicou:!1}],[{codigo:61,imagem:1,clicou:!1},{codigo:62,imagem:2,clicou:!1},{codigo:63,imagem:3,clicou:!1},{codigo:64,imagem:4,clicou:!1},{codigo:65,imagem:5,clicou:!1},{codigo:66,imagem:1,clicou:!1},{codigo:67,imagem:2,clicou:!1},{codigo:68,imagem:3,clicou:!1},{codigo:69,imagem:4,clicou:!1},{codigo:70,imagem:5,clicou:!1}],[{codigo:71,imagem:1,clicou:!1},{codigo:72,imagem:2,clicou:!1},{codigo:73,imagem:3,clicou:!1},{codigo:74,imagem:4,clicou:!1},{codigo:75,imagem:5,clicou:!1},{codigo:76,imagem:1,clicou:!1},{codigo:77,imagem:2,clicou:!1},{codigo:78,imagem:3,clicou:!1},{codigo:79,imagem:4,clicou:!1},{codigo:80,imagem:5,clicou:!1}],[{codigo:81,imagem:1,clicou:!1},{codigo:82,imagem:2,clicou:!1},{codigo:83,imagem:3,clicou:!1},{codigo:84,imagem:4,clicou:!1},{codigo:85,imagem:5,clicou:!1},{codigo:86,imagem:1,clicou:!1},{codigo:87,imagem:2,clicou:!1},{codigo:88,imagem:3,clicou:!1},{codigo:89,imagem:4,clicou:!1},{codigo:90,imagem:5,clicou:!1}],[{codigo:91,imagem:1,clicou:!1},{codigo:92,imagem:2,clicou:!1},{codigo:93,imagem:3,clicou:!1},{codigo:94,imagem:4,clicou:!1},{codigo:95,imagem:5,clicou:!1},{codigo:96,imagem:1,clicou:!1},{codigo:97,imagem:2,clicou:!1},{codigo:98,imagem:3,clicou:!1},{codigo:99,imagem:4,clicou:!1},{codigo:100,imagem:5,clicou:!1}]];

let id = 5;

for (let i = 0; i < matriz.length; i  ) {
  const found = matriz[i].find(e => e.codigo == id);
  if (found) {
    found.clicou = !found.clicou;
    console.log("y: ", found)
    break;
  }
}