Если значение объекта `num` больше, чем` quota` в массиве, то добавьте класс к моему элементу, который имеет тот же #id из моих объектов массива

Question

У меня есть карта в svg, каждая группа с #id представляет регион:

<svg>
  <g id="CP1000"><path>...</path></g>
  <g id="CP1140"><path>...</path></g>
  <g id="CP1030"><path>...</path></g>
  ..
</svg>

У меня есть файл с массивом объектов с каждым регионом и своими собственными данными name, quota и num. Вот как выглядит мой javascript файл:

var regions = [
  {id: 'CP1000', name: 'Bruxelles', quota: '20', num: '15'},
  {id: 'CP1140', name: 'Etterbeek', quota: '20', num: '12'},
  {id: 'CP1030', name: 'Schaerbeek', quota: '20', num: '21'},
  ...
];

Мне нужно сравнить мое значение объекта num с quota в пределах его уникального значения id. Если num больше quota, добавьте класс is-greater к этому элементу <g id="id">. Например:

For id: 'CP1030', I need to compare if its `num` is greater than `quota`.
If it's true then add a class to my element <g id="CP1030">...</g>.

Сценарий будет искать мой элемент с идентификатором CP1030 на моей странице, и у меня будет:

<svg>
  <g id="CP1000"><path>...</path></g>
  <g id="CP1140"><path>...</path></g>
  <g id="CP1030" class="is-greater"><path>...</path></g>
  ..
</svg>

Таким образом, я смогу заполнить этот идентификатор региона # CP1030 с указанным c цветом фона. Есть идеи, как это сделать в jQuery? Большое спасибо за вашу помощь.

Answer 1

jQuery в первую очередь предназначен для внесения изменений в DOM и не имеет отношения к этой проблеме. Все, что вам нужно, это forEach() l oop над объектами в массиве, что-то вроде этого:

var regions = [
  {id: 'CP1000', name: 'Bruxelles', quota: '20', num: '15'},
  {id: 'CP1140', name: 'Etterbeek', quota: '20', num: '12'},
  {id: 'CP1030', name: 'Schaerbeek', quota: '20', num: '21'},
];

regions.forEach(obj => {
  if (obj.num > obj.quota) 
    document.getElementById(obj.id).classList.add('is-greater');
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<svg>
  <g id="CP1000"><path /></g>
  <g id="CP1140"><path /></g>
  <g id="CP1030"><path /></g>
</svg>