How to get the values of multiple JSON arrays using checkboxes?

Question

HTML and 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" : [] 
} ] } ] } ]

Here in this code if I select the 2 checkbox once at a time means I'm getting the output of only first JSON value...
if I uncheck one means I'm getting its respective values...
I mean for example if I select women from a category then I'm getting 2 checkboxes as 1.personal care appliances and 2.jewellery.
if I select multiple checkboxes once at the time means I'm getting only hair dryers(the value within personal care appliances) but I'm not getting artificial jewellery(value within jewellery)
if I select single at a time means I'm getting appropriate result please help me out with this error...
I've stuck here.

can you create a jsFiddle for this sample, so It will helpful to debug. — Akhil Aravind
– Akhil Aravind, Commented Jan 31, 2020 at 5:30
jsfiddle.net/Manoj07/6frs3n09/10 dear sir here,s the jsfiddle link... in this link my program is there... there are so many categories like men,women,home furniture,electronics... in that JSON ive only given women array... in that, if i select women from select option means, 1.personal care appliances and jewelry showld show in Checkboxes, and if i select both(multiple) personal care appliances and jewelry then its showing only the first array's(personal care appliances) value(hair dryer). if i uncheck any one and click the button means i'm getting proper result. but not on multiple — Manoj H M
– Manoj H M, Commented Jan 31, 2020 at 6:04
Yes sir... That only I said... I need the list of Men,women, electronics etc., In Select option... In that Json I've given only Women Json array... Single option also enough for me... And I'll modify the code here... And if I select women means I should get Personal care appliances and jewelry as checkboxes.. and if I select multiple checkboxes once means I should get all values in the Json array in console — Manoj H M
– Manoj H M, Commented Jan 31, 2020 at 6:26

Akhil Aravind · Accepted Answer · 2020-01-31 06:30:39Z

You had made a couple of mistakes in the for loop, please check the updated code snippet.

Here for (var j = 0; j < obj[i].siblings.length; j++) you missed to add siblings.

Here var checkedValue = $('.catcbs:checked').map(function(){ return $(this).val(); }).get();, here you was getting only single value, updated it to get the value in array.

Please go through it and let me know if you have any confusions.

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>

Actually... Mangalapurian... Border of Karnataka and Kerala...
@ManojHM great bro, I am from kerala. Hope you get the answer, dont forget to accept the answer and an upvote also :). Keep Coding Bro
Thanks Etta... Now power has gone... Will check the code once the power comes... And then I'll ping you again... Thanks Ettan...

Collectives™ on Stack Overflow

How to get the values of multiple JSON arrays using checkboxes?

1 Answer 1

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related