title: How to dynamically filter JSON data based on category
body: <pre class="lang-js prettyprint-override"><code> [
      {
          "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
                  }
                ]
              }
          ]
      }
  ]
  </code></pre>
  
  <p>Am working on this project that require fetching items from a JSON file according to categories, when a particular subcategory is clicked, it should display only items from that subcategory but my code is working for only one subcategory but I don't know how to make it dynamic to work for every subcategory</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>$('#subcategory1').click(function() {
    $.getJSON("list.json",
      function(data) {
        console.log(data);
        let output = '';
        $.each(data[0].subcategories[0].items, function(index, product) {
          output += `
                &lt;div class="col-md-3"&gt;
                    &lt;div class="items"&gt;
                        &lt;div class='photo'&gt;
                            &lt;img src="${product.imagelink}"&gt;
                        &lt;/div&gt;
                        &lt;div class="info"&gt;
                            &lt;h4&gt;${product.name}&lt;/h4&gt;
                            &lt;h5&gt;$${product.price}&lt;/h5&gt;
                        &lt;/div&gt;
                        &lt;div class="info"&gt;
                            &lt;p&gt;
                                &lt;a href="#"&gt;Add to cart&lt;/a&gt;
                            &lt;/p&gt;
                        &lt;/div&gt;
                    &lt;/div&gt;
                &lt;/div&gt;
             `;
        });
  
        $('#images').html(output);
      });
  });</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"&gt;&lt;/script&gt;
  
  &lt;ul id="category1"&gt;
    &lt;li&gt;&lt;a href="#" id="subcategory1"&gt;Baby Care&lt;/a&gt;&lt;/li&gt;
    &lt;li&gt;&lt;a href="#" id="subcategory2"&gt;Drug Store&lt;/a&gt;&lt;/li&gt;
    &lt;li&gt;&lt;a href="#" id="subcategory3"&gt;Health and Personal Care&lt;/a&gt;&lt;/li&gt;
    &lt;li&gt;&lt;a href="#" id="subcategory4"&gt;Household Supplies&lt;/a&gt;&lt;/li&gt;
  &lt;/ul&gt;</code></pre>
  </div>
  </div>
  </p>