How to filter objects in JSON

Question

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.

`I have a JSON file with thousand of objects` - what does the JSON look like? You haven't shown any JSON in your code, so how can we help? — Bravo, Jun 26 '22 at 04:06
@kiro - right, so you aren't dealing with JSON in the code you posted at all - you're dealing with a javascipt object that was created from some JSON, but you've `JSON.parse`d it directly or indirectly from a fetch/ajax call ... — Bravo, Jun 26 '22 at 04:22
by the way `productsEl.innerHTML +=` is the worst way to add thousands of elements to a page — Bravo, Jun 26 '22 at 04:26

score 1 · Accepted Answer · answered Jun 26 '22 at 04:33

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>

if `
` already contains ALL "thousand of products", why would you process `var Sheet` every time and recreate the innerHTML of the `div` ... this would be a needlessly bad user experience with "thousand of products" - why not use css to hide filtered products instead? — Bravo, Jun 26 '22 at 04:46
@Bravo, Better to use pagination in that case. If we do filter and hide them using css that is almost the same as this computation — Amila Senadheera, Jun 26 '22 at 04:53
This is perfect, I was just wondering, this changes my productsEl so my CSS is all messed up because my grid is under my .sheet. Any idea how to fix that — kiro, Jun 26 '22 at 05:11
@kiro - the html is almost identical - for some reason there's an added `category-id` attribute that is completely irrelevant and unused, but that's not an issue is. What IS wrong, in your original code, you're adding unbalanced innerHTML (there's a `` missing - so the issue is yours, not the code in this answer — Bravo, Jun 26 '22 at 05:22
@AmilaSenadheera - pagination? there's no pagination, and if you do pagination, then yes, this code almost makes sense - you missed my point, but never mind - this answer is kind of ok in an early 2000's way — Bravo, Jun 26 '22 at 05:26
@Bravo, I got your point, I initially thought hide and show using css. That's why added category-id property though. But later I feel like reusing the same getProudust function is better. — Amila Senadheera, Jun 26 '22 at 05:33
for 3 items - sure - for thousand of products it's not (but OP thinks this is good, so let them figure out how this will produce an awful user experience) - you did the best with the code given :p — Bravo, Jun 26 '22 at 05:35

How to filter objects in JSON

1 Answers1