Почему я не могу распечатать идентификатор перекрывающихся прямоугольников?

Question

У меня есть 2 списка словарей: namedLabels

[{"id":"2","image":"45-14.png","name":"test2","xMax":"4784","xMin":"4767","yMax":"64","yMin":"57"},{"id":"5","image":"45-14.png","name":"test5","xMax":"4896","xMin":"4852","yMax":"64","yMin":"59"}]

и otherLabels

[{"id":"1","image":"45-14.png","name":"","xMax":"4760","xMin":"4751","yMax":"64","yMin":"59"},{"id":"3","image":"45-14.png","name":"","xMax":"4830","xMin":"4791","yMax":"67","yMin":"57"},{"id":"4","image":"45-14.png","name":"","xMax":"4845","xMin":"4837","yMax":"64","yMin":"57"},{"id":"6","image":"45-14.png","name":"","xMax":"4914","xMin":"4902","yMax":"67","yMin":"57"}]

Что я хочу сделать, это: если квадрат namedLabels перекрываетсяквадрат otherLabels полностью, так как он полностью покрывает его, я хочу, чтобы id соответствующего элемента otherLabels был напечатан (в консоли).

Мой код:

for (i = 0; i < namedLabels.length; i++) {
    for (i = 0; i < otherLabels.length; i++) {
      if ((otherLabels[i].xMin<namedLabels[i].xMin) && (otherLabels[i].xMax<namedLabels[i].xMax) &&
          (otherLabels[i].yMin<namedLabels[i].yMin) && (otherLabels[i].yMax<namedLabels[i].yMax)) {
        console.log (otherLabels[i].id)
      }
    }
  }

Я получаю сообщение об ошибке в строке 3 общего фрагмента:

Uncaught TypeError: Cannot read property 'xMin' of undefined
    at HTMLCanvasElement.c.onclick

Answer 1

Вы используете одну и ту же переменную i для внутреннего и внешнего цикла.Измените переменную для внутреннего цикла for на j, и она будет работать:

var namedLabels = [{"id":"2","image":"45-14.png","name":"test2","xMax":"4784","xMin":"4767","yMax":"64","yMin":"57"},{"id":"5","image":"45-14.png","name":"test5","xMax":"4896","xMin":"4852","yMax":"64","yMin":"59"}]
var otherLabels = [{"id":"1","image":"45-14.png","name":"","xMax":"4760","xMin":"4751","yMax":"62","yMin":"50"},{"id":"3","image":"45-14.png","name":"","xMax":"4830","xMin":"4791","yMax":"67","yMin":"57"},{"id":"4","image":"45-14.png","name":"","xMax":"4845","xMin":"4837","yMax":"64","yMin":"57"},{"id":"6","image":"45-14.png","name":"","xMax":"4914","xMin":"4902","yMax":"67","yMin":"57"}]

for (i = 0; i < namedLabels.length; i++) {
    for (j = 0; j < otherLabels.length; j++) {
      if ((otherLabels[j].xMin<namedLabels[i].xMin) && (otherLabels[j].xMax<namedLabels[i].xMax) &&
          (otherLabels[j].yMin<namedLabels[i].yMin) && (otherLabels[j].yMax<namedLabels[i].yMax)) {
        console.log (otherLabels[j].id)
      }
    }
  }