How to filter objects in JSON

June 26, 2022

const Sheet =  [
        {
            "Code": "A-0-1",
            "UPC": "4009803054728",
            "Expr1": "Photos/4009803054728.JPG",
            "Title": "U.S.S. Constitution",
            "Price": " 31 ",
            "InStock": " 7 ",
            "Category": "Toys"
        },
                {
            "Code": "C-1-1",
            "UPC": "662248910376",
            "Expr1": "Photos/662248910376.JPG",
            "Title": "PS3 TOMB RAIDER TRILOGY",
            "Price": " 29 ",
            "InStock": " 4 ",
            "Category": "Video Games"
        },
                {
            "Code": "C-1-12",
            "UPC": "719192634855",
            "Expr1": "Photos/719192634855.JPG",
            "Title": "LG DVDRW GH24NSC0 24X SATA without software Black Bare",
            "Price": " 25 ",
            "InStock": " 2 ",
            "Category": "Electronics"
        },
    ]
    
    
    const productsEl = document.querySelector(".Sheet");

function getProducts() {
    Sheet.forEach((product) => {
        productsEl.innerHTML += `<div class="productContainer">
            <div class="img">
                <img src=${product.Expr1} alt="Image Unavailable" height="170px;" width="170px">
            </div>
            <div class="itemdesc">
                <h2 class="itemName" id="itemName">${product.Title}</h2>
                <h4 class="price">$<span id="price">${product.Price}</span></h4>
                <div class="desc">
                    <p id="desc">${product.Code}</p>
                </div>
                <div class="stock">
                    <p> ${product.InStock} Units</p>
            </div>
            <div class="UPCcode">${product.UPC}</div>
            <div class="addToCart">
                <button id="addToCart" > Add to Cart</button>
            </div>
    </div>`; 
    })
}
getProducts(); 

function Toys() {
    //Show all objects with a Category of Toys
}

    <div id="btnContainer">
        <button class="btn active" > Show all</button>
        <button class="btn"onclick="Electronics()">Electronics</button>
        <button class="btn" onclick="Supplments()">Supplments</button>
        <button class="btn" onclick="Toys()">Toys</button>
        <button class="btn" onclick="Packing()">Packing</button>
        <button class="btn" onclick="Other()">Other</button>
    </div>
        <div class="Sheet">
    </div>

I have a file with thousand of objects, all with a category. I have buttons on the top of the page with a category as the HTML. How can I show these categories when someone presses the button. For example, I press the "Toys" button, all objects with the same category appear and the rest disappears.

>Solution :

This would also work. Using filter inside the getProducts function:

const Sheet = [{
    "Code": "A-0-1",
    "UPC": "4009803054728",
    "Expr1": "Photos/4009803054728.JPG",
    "Title": "U.S.S. Constitution",
    "Price": " 31 ",
    "InStock": " 7 ",
    "Category": "Toys"
  },
  {
    "Code": "C-1-1",
    "UPC": "662248910376",
    "Expr1": "Photos/662248910376.JPG",
    "Title": "PS3 TOMB RAIDER TRILOGY",
    "Price": " 29 ",
    "InStock": " 4 ",
    "Category": "Video Games"
  },
  {
    "Code": "C-1-12",
    "UPC": "719192634855",
    "Expr1": "Photos/719192634855.JPG",
    "Title": "LG DVDRW GH24NSC0 24X SATA without software Black Bare",
    "Price": " 25 ",
    "InStock": " 2 ",
    "Category": "Electronics"
  },
]

let selectedCategory = "All";


const productsEl = document.querySelector(".Sheet");

function getProducts(selectedCategory) {
  let newHTML = "";
  Sheet.filter(({
    Category
  }) => {
    if (selectedCategory === undefined || selectedCategory === "All") {
      return true;
    }
    return Category === selectedCategory

  }).forEach((product) => {
    newHTML += `<div class="productContainer" category-id=${product.Category}>
            <div class="img">
                <img src=${product.Expr1} alt="Image Unavailable" height="170px;" width="170px">
            </div>
            <div class="itemdesc">
                <h2 class="itemName" id="itemName">${product.Title}</h2>
                <h4 class="price">$<span id="price">${product.Price}</span></h4>
                <div class="desc">
                    <p id="desc">${product.Code}</p>
                </div>
                <div class="stock">
                    <p> ${product.InStock} Units</p>
            </div>
            <div class="UPCcode">${product.UPC}</div>
            <div class="addToCart">
                <button id="addToCart" > Add to Cart</button>
            </div>
    </div>`;
  })
  productsEl.innerHTML = newHTML;
}
getProducts(selectedCategory);

function onFilterClick(event) {
  selectedCategory = event.target.value;
  getProducts(selectedCategory);
}

<div id="btnContainer">
  <button class="btn active" value="All" onclick="onFilterClick(event)">Show all</button>
  <button class="btn" value="Electronics" onclick="onFilterClick(event)">Electronics</button>
  <button class="btn" value="Supplments" onclick="onFilterClick(event)">Supplments</button>
  <button class="btn" value="Toys" onclick="onFilterClick(event)">Toys</button>
  <button class="btn" value="Packing" onclick="onFilterClick(event)">Packing</button>
  <button class="btn" value="Other" onclick="onFilterClick(event)">Other</button>
</div>
<div class="Sheet">
</div>