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 += `
 Image Unavailable

${product.Title}

$${product.Price}

${product .Code}

${product.InStock} Units

${product.UPC }
`; }) } 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.

kiro is a new contributor to this site. Take care in asking for clarification, commenting, and answering. Check out our Code of Conduct.

6

you can filter out like this, then you can save toys into someobject show that in your html.

    for (var key in Sheet) 
   {
    if(Sheet[key].Category=="Toys"){
        //dosomething
    }
   }

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>

Not the answer you’re looking for? Browse other questions tagged javascript or ask your own question.