Как получить значения нескольких массивов JSON с помощью флажков?

Question

HTML и JS

<div class="form-group form-inline text-center">
  <label for="select_category">Select Category</label>&emsp;
  <select class="custom-select" id="select_category" style="width: 500px;" onchange="listcatcb();">
    <option selected></option>
  </select>
</div>
<div class="container" id="cats">
  <div class="form-check" id="catrbs"> </div>
  <button class="btn btn-outline-secondary" onclick="nextcats();">Click Next!</button>
</div>

getallcategory();

function getallcategory() {
  var link = 'allcat.json';
  $.post(link).done(function (data) {
    data2 = JSON.stringify(data);
    var obj = jQuery.parseJSON(data2);
    for (var i = 0; i < obj.length; i++) {
      $("#select_category").append('<option value="' + obj[i].name + '">' + obj[i].name + '</option> ')
    }
  });
}

function listcatcb() {
  selcat = document.getElementById("select_category").value;
  var link = 'allcat.json';
  $.post(link).done(function (data) {
    data2 = JSON.stringify(data);
    var obj = jQuery.parseJSON(data2);
    for (var i = 0; i < obj.length; i++) {
      if (obj[i].name == selcat) {
        for (var j = 0; j < obj.length; j++) {
          $("#catrbs").append('<input class="form-check-input catcbs" type="checkbox" id="' + obj[i].siblings[
              j].name + '" value="' + obj[i].siblings[j].name + '"><label class="form-check-label" for="' +
            obj[i].siblings[j].name + '">' +
            obj[i].siblings[j].name +
            '</label><br/>')
        }
      }
    }

  });
}

function nextcats() {
  var link = 'allcat.json';
  var checkedValue = $('.catcbs:checked').val();;
  $.post(link).done(function (data) {
    data2 = JSON.stringify(data);
    var obj = jQuery.parseJSON(data2);

    for (var i = 0; i < obj.length; i++) {
      if (obj[i].name == selcat) {
        for (var j = 0; j < obj.length; j++) {

          if (obj[i].siblings[j].name == checkedValue) {
            for (var k = 0; k < obj.length; k++) {
              console.log(obj[i].siblings[j].siblings[k].name);
            }
          }
        }
      }
    }
  });
}

allcat. json

[ { "id"       : "47"
  , "name"     : "Women"
  , "parent"   : "0"
  , "status"   : "Enabled"
  , "itemcount": 44
  , "siblings": 
    [ { "id"       : "87"
      , "name"     : "Personal Care Appliances"
      , "parent"   : "47"
      , "status"   : "Enabled"
      , "itemcount": 2
      , "siblings": 
        [ { "id"       : "88"
          , "name"     : "Hair Dryers"
          , "parent"   : "87"
          , "status"   : "Enabled"
          , "itemcount": 2
          , "siblings" : [] 
      } ] } 
    , { "id"       : "127"
      , "name"     : "Jewellary"
      , "parent"   : "47"
      , "status"   : "Enabled"
      , "itemcount": 41
      , "siblings": 
        [ { "id"       : "128"
          , "name"     : "Artificial Jewellary"
          , "parent"   : "127"
          , "status"   : "Enabled"
          , "itemcount": 41
          , "siblings" : [] 
} ] } ] } ] 

Здесь, в этот код, если я устанавливаю флажок 2 один раз за раз, означает, что я получаю вывод только первого JSON значения ...
если снять флажок с одного означает, что я получаю соответствующие значения ...
Я имею в виду, например, если я выбираю женщин из категории, то я получаю 2 флажка как 1. средства личной гигиены и 2. украшения.
если я выберу несколько флажков за один раз, это означает, что я получаю только фены ( ценность в средствах личной гигиены), но я не получаю искусственные украшения (стоимость в украшениях)
если я выбрал один раз, значит, я получаю соответствующий результат, пожалуйста, помогите мне с этой ошибкой ...
Я застрял здесь.

Answer 1

Вы допустили пару ошибок в for loop, пожалуйста, проверьте обновленный фрагмент кода.

Здесь for (var j = 0; j < obj[i].siblings.length; j++) вы пропустили добавление siblings.

Здесь var checkedValue = $('.catcbs:checked').map(function(){ return $(this).val(); }).get();, здесь вы получаете только одно значение, обновили его, чтобы получить значение в массиве.

Пожалуйста, go просмотрите его и дайте мне знать, если у вас есть какие-то недоразумения.

const jsonData = 
[ 
   { 
      "id":"47",
      "name":"Women",
      "parent":"0",
      "status":"Enabled",
      "itemcount":44,
      "siblings":[ 
         { 
            "id":"87",
            "name":"Personal Care Appliances",
            "parent":"47",
            "status":"Enabled",
            "itemcount":2,
            "siblings":[ 
               { 
                  "id":"88",
                  "name":"Hair Dryers",
                  "parent":"87",
                  "status":"Enabled",
                  "itemcount":2,
                  "siblings":[ 

                  ]
               }
            ]
         },
         { 
            "id":"127",
            "name":"Jewellary",
            "parent":"47",
            "status":"Enabled",
            "itemcount":41,
            "siblings":[ 
               { 
                  "id":"128",
                  "name":"Artificial Jewellary",
                  "parent":"127",
                  "status":"Enabled",
                  "itemcount":41,
                  "siblings":[ 

                  ]
               }
            ]
         }
      ]
   }
];
function getallcategory() {
  var link = jsonData;
    for (var i = 0; i < link.length; i++) {
      $("#select_category").append('<option value="' + link[i].name + '">' + link[i].name + '</option> ')
    }

}

function listcatcb() {
  selcat = document.getElementById("select_category").value;
  var obj = jsonData;
    for (var i = 0; i < obj.length; i++) {
      if (obj[i].name == selcat) {
        for (var j = 0; j < obj[i].siblings.length; j++) {
          $("#catrbs").append('<input class="form-check-input catcbs" type="checkbox" id="' + obj[i].siblings[
              j].name + '" value="' + obj[i].siblings[j].name + '"><label class="form-check-label" for="' +
            obj[i].siblings[j].name + '">' +
            obj[i].siblings[j].name +
            '</label><br/>')
        }
      }
    }

}

function nextcats() {
  var obj = jsonData;
  var checkedValue = $('.catcbs:checked').map(function(){
  return $(this).val();
  }).get();
  var selectedItem='';
    for (var i = 0; i < obj.length; i++) {
      if (obj[i].name == selcat) {
        for (var j = 0; j < obj[i].siblings.length; j++) {
          if (checkedValue.indexOf(obj[i].siblings[j].name) != -1) {
            for (var k = 0; k < obj.length; k++) {
              selectedItem += `<p>${obj[i].siblings[j].siblings[k].name}</p>`;
            }
          }
        }
      }
    }
    $('#selected-item').html(selectedItem)
}
getallcategory();

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.0/jquery.min.js"></script>
<div class="form-group form-inline text-center">
  <label for="select_category">Select Category</label>&emsp;
  <select class="custom-select" id="select_category" style="width: 500px;" onchange="listcatcb();">
    <option selected></option>
  </select>
</div>
<div class="container" id="cats">
  <div class="form-check" id="catrbs"> </div>
  <button class="btn btn-outline-secondary" onclick="nextcats();">Click Next!</button>
</div>
<div class="container" id="selected-item">
</div>
</div>