Борьба с вызовом API - Ajaj

Question

Я создаю визуализацию, которая учитывает выбор пользователя и добавляет эти изображения к доске для просмотра.

Как это работает, при нажатии кнопок параметр добавляется в URL, который запускает API для получения JSON. Если щелкнуть элемент, он становится активным / активным, и соответствующая строка присоединяется к URL-адресу. В конце концов, я могу получить данные, основанные на выбранных мной сущностях, а не на всех данных все время.

Данные возвращаются следующим образом:

[{"total_bx": 5623058}, {"total_by": 1021004}, {"total_either_sources": 6641921}, {"total_all_sources": 2141}]

Таким образом, добавление всех массивов в массив приведет к тому, что мои 'total_either_sources' и 'total_all_sources' будут неверными. Мне нужно, чтобы это было сфокусировано на выбранных мной компаниях.

Но с возвращением массива Bx - это данные [0], а By - это данные [1]. Что произойдет, если Bx не будет выделен, тогда data [1] станет data [0], а моя функция не работает.

Можете ли вы помочь мне заставить это работать?

    $('.lg-circ').one('click', function(){
     var executed = false;

    if ($('.semi-circle-1').hasClass('active') === true) {
      var type = 'pet'
      URL = URL + type;
      console.log(URL)
  } else {
    var type = 'pet_owner'
    URL = URL + type;
  };

  if ($('.logo10').hasClass('active') === true) {
    var logo1 = '&source_list[]=Bx'
    URL = URL + logo1
  } else {
    var logo1 = ''
    URL = URL + logo1
  }


  if ($('.logo11').hasClass('active') === true) {
    var logo1 = '&source_list[]=By'
    URL = URL + logo1
  } else {
    var logo1 = ''
    URL = URL + logo1
  }
  console.log(URL);

  var API = new XMLHttpRequest();
  API.open('GET', URL);
  API.onload = function() {
      var APIData = JSON.parse(API.responseText);
      appendData(APIData);
  };
  API.send();

  function appendData(data) {
    if ($('#b10').hasClass('alive') === true) {
      var B10 = document.getElementById('b10');
      var number10 = data[0].total_Bx;
      var numberFormated10 = numberWithCommas(number10);
      var B10data = '<p class="BxText">' + numberFormated10 + '<br>' + ' Unique Pets</p>';
      B10.insertAdjacentHTML('beforeend', B10data);
    }

    if ($('#b11').hasClass('alive') === true) {
      var B11 = document.getElementById('b11');
      var number11 = data[1].total_By;
      var numberFormated11 = numberWithCommas(number11);
      var B11data = '<p class="BxText">' + numberFormated11 + '<br>' + ' Unique Pets</p>';
      B11.insertAdjacentHTML('beforeend', B11data);   
  }
}
  $('.clickysection').addClass('activated')
  $('.dead').detach();
  $.getScript("https://cdnjs.cloudflare.com/ajax/libs/zoomooz/1.1.6/jquery.zoomooz.js");
})

В данный момент я работаю со следующим