как получить значения json на множественном массиве json

Question

В приведенном ниже коде я хочу получить значение для женщин, которые я получаю, 1. Я получаю приборы для личной гигиены и 2. Ювелирные изделия ... но после этого, если я отмечаю любой флажок, я получаю ошибку как "Uncaught TypeError: Невозможно прочитать свойство 'name' of undefined", а также, если я выбрал несколько флажков, я должен получить значения всех флажков.

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":[ 

                  ]
               }
            ]
         }
      ]
   }
]

html

<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>

javascript

function getallcategory() {
    $.getJSON("allcat.json", function (json) {
        var link = json;
        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;
    $.getJSON("allcat.json", function (json) {
        var obj = json;
        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() {
    $.getJSON("allcat.json", function (json) {
        console.log(json); // this will show the info it in firebug console
        var obj = json;
        console.log(obj);
        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();

Answer 1

Я попытался повторить то же самое и не нашел проблем. Единственное изменение, которое я сделал, - это использование файла json в качестве постоянной переменной вместо загрузки его через файл.

const 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": [

        ]
      }]
    }
  ]
}]

function getallcategory() {
        var link = json;
        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 = json;
        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 = json;
        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>

Answer 2

В функции nextcats() вы включаете obj, затем obj[i].siblings и затем obj снова. Вы, вероятно, хотели l oop на obj[i].siblings[j].siblings:

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

        // loop on obj[i].siblings
        for (var j = 0; j < obj[i].siblings.length; j++) {
            if (checkedValue.indexOf(obj[i].siblings[j].name) != -1) {

                // loop on obj[i].siblings[j].siblings
                for (var k = 0; k < obj[i].siblings[j].length; k++) {
                    selectedItem += `<p>${obj[i].siblings[j].siblings[k].name}</p>`;
                }
            }
        }
    }
}