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

Question

在下面的代码中，我想获得女性的价值，即我得到 1.Personal care Appliance 和 2. Jewelry... 但之后如果我选中任何复选框，则会出现错误“未捕获的类型错误：无法读取未定义的属性‘名称’”，如果我选择多个复选框，那么我应该获取所有复选框的值。

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>