如何获取多个json数组上的json值

Question

在下面的代码中，我想获得女性的价值，即我获得了 1. 个人护理用具和 2. 珠宝......但之后，如果我选中任何复选框，则会收到错误消息“未捕获的类型错误” ：无法读取未定义的属性“名称””，而且如果我选择多个复选框，那么我应该获取所有复选框的值。

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

在nextcats()函数中，您在obj循环，然后是obj[i].siblings ，然后是obj 。 您可能打算在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>`;
                }
            }
        }
    }
}

Answer 2

我尝试复制相同的内容，但没有发现任何问题。 我所做的唯一更改是将 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>