如何根据类别动态过滤JSON数据

Question

 [
    {
        "category": "Beauty",
        "subcategories": [
            {
                "name": "Baby Care",
                "items": [
                    {
                        "name": "soap",
                        "price": 10.00
                    },
                    {
                        "name": "cream",
                        "price": 20.00
                    },
                    {
                        "name": "dipers",
                         "price": 8.00
                    },
                    {
                        "name": "Dress",
                        "price": 13.00
                    }
                ]
            },
            {
                "name": "Drug Store",
                "items": [
                    {
                        "name": "Bandage",
                         "price": 5.00
                    },
                    {
                        "name": "stringe",
                        "price": 6.50
                    },
                    {
                        "name": " Pain Relief",
                        "price": 8.00
                    },
                    {
                        "name": "First Aid Kit",
                         "price": 14.99
                    },
                   {
                        "name": "Cold Relief",
                        "price": 6.50
                    }]
            },
            {
                "name": "Health and Personal Care",
                "items": []
            },
            {
                "name": "Household Supplies",
                "items": [{
                        "name": "Air Freshener",
                         "price": 1.25
                    },
                    {
                        "name": "All Purpose Cleaner",
                        "price": 2.99
                    },
                    {
                        "name": "Disinfecting Wipes",
                        "price": 8.99
                    }
                ]
            }
        ]
    },
    {
        "category": "Pantry Items",
        "subcategories": [
            {
                "name": "Beverages",
                "items": [
                  {
                    "name": "Apple Juice",
                    "price": 5.99
                  },

                    {
                        "name": "Banana-Orange Juice",
                         "price": 1.99
                    },

                    {
                        "name": "Cranberry Juice",
                         "price": 4.99
                    },

                    {
                        "name": "Strawberry Lemonade",
                        "price": 2.50
                    }
                ]
            },
            {
                "name": "Canned Food",
                "items": [
                    {
                        "name": "Pickels",
                        "description": "Assorted pickles",
                        "price": 1.99
                    },
                    {
                        "name": "Tomatoe Sauce",
                         "price": 1.59
                    }
                ]
            }
        ]
    },
    {
        "category": "Perishables",
        "subcategories": [
            {
                "name": "Bread and Bakery",
                "items": [
                {
                  "name": "Baguette",
                  "price": 3.00
                },
                {
                  "name": "Pie",
                  "price": 5.00
                },
                {
                  "name": "Brownies",
                  "price": 2.50
                }
              ]
            },
            {
                "name": "Cheese",
                "items": [
                {
                  "name": "Feta Cheese",
                   "price": 7.54
                },
                {
                  "name": "Emental Cheese",
                  "price": 8.74
                },
                {
                  "name": "Swiss Cheese",
                  "price": 5.89
                }
              ]
            }
        ]
    }
]

正在处理这个需要根据类别从JSON文件中获取项目的项目，当单击某个子类别时，它应该只显示该子类别中的项目，但我的代码仅适用于一个子类别但我不知道如何使其动态地适用于每个子类别

$('#subcategory1').click(function() {
  $.getJSON("list.json",
    function(data) {
      console.log(data);
      let output = '';
      $.each(data[0].subcategories[0].items, function(index, product) {
        output += `
              <div class="col-md-3">
                  <div class="items">
                      <div class='photo'>
                          <img src="${product.imagelink}">
                      </div>
                      <div class="info">
                          <h4>${product.name}</h4>
                          <h5>$${product.price}</h5>
                      </div>
                      <div class="info">
                          <p>
                              <a href="#">Add to cart</a>
                          </p>
                      </div>
                  </div>
              </div>
           `;
      });

      $('#images').html(output);
    });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<ul id="category1">
  <li><a href="#" id="subcategory1">Baby Care</a></li>
  <li><a href="#" id="subcategory2">Drug Store</a></li>
  <li><a href="#" id="subcategory3">Health and Personal Care</a></li>
  <li><a href="#" id="subcategory4">Household Supplies</a></li>
</ul>

Answer 1

可能有更好的方法来做你想要的。但是你可以尝试检查下面的内容。

将您的HTML更改为

<ul id="category1">
  <li><a href="#" class='subcategory'  id="subcategory1">Baby Care</a></li>
  <li><a href="#" class='subcategory'  id="subcategory2">Drug Store</a></li>
  <li><a href="#" class='subcategory'  id="subcategory3">Health and Personal Care</a></li>
  <li><a href="#" class='subcategory'  id="subcategory4">Household Supplies</a></li>
</ul>
<div id="subItems"></div>

将您的js代码稍微改为

var selectedSubCategoryObj = null
$('#subcategory1').click(function() {
  $.getJSON("list.json",
    function(data) {
      console.log(data);
      let output = '';
      selectedSubCategoryObj= $(this)

      $.each(data[0].subcategories, function(index, product) {
        if($(selectedSubCategoryObj)[0].innerHTML == product.name){
          $.each(product.items, function(index, eachItem) {
          output += `
          <div class="col-md-3">
              <div class="items">
                  <div class='photo'>
                      <img src="${eachItem.imagelink}">
                  </div>
                  <div class="info">
                      <h4>${eachItem.name}</h4>
                      <h5>$${eachItem.price}</h5>
                  </div>
                  <div class="info">
                      <p>
                          <a href="#">Add to cart</a>
                      </p>
                  </div>
              </div>
          </div>
       `;
        })
        $('#subItems').html(output);
      }
      });
    });
});

一旦交叉检查它是否与您正在寻找的相似。