Filter output based on value from dropdown select

Question

Creating a grocery store waste tracker for a project. It outputs a string of objects, each has a expiration date. I'm checking whether the date (in milliseconds) is negative or positive. If it's positive, the function returns true -- it is expired. And vice versa for negative. There is a drop down select to filter and display: all products, expired products and non expired products. I can't get the if statements right to display the products based on the dropdown value:

 function displayProducts() {
             var productOutput = document.getElementById("productOutput");
             var filterProducts = document.getElementById("sbProductsFilter");

             productOutput.innerHTML = "";

             if (filterProducts.value == "All") {
                for (i = 0; i < products.length; i++) {
                   productOutput.innerHTML = products[i].outputString();
                }
             }

             if (filterProducts.value == "Expired") {
                for (i = 0; i < products.length; i++) {
                   if (products[i].isExpired() == true) {
                      console.log("hello");
                      productOutput.innerHTML = products[i].outputString();
                   }
                }
             }

             if (filterProducts.value == "Not Expired") {
                for (i = 0; i < products.length; i++) {
                   if (products[i].isExpired() == false) {
                      console.log("hello");
                      productOutput.innerHTML = products[i].outputString();
                   }
                }
             }
          }

Full HTML and JS:

<body onload="displayProducts();">

   <h1>Grocery Store Waste Tracker</h1>

   <!-- Inventory -->
   <fieldset>
      <legend>Store Inventory</legend>
      <form>
         <!-- Filter-->
         <p>
            Filter Products By:
            <select id="sbProductsFilter" onchange="displayProducts();">
               <option selected>All</option>
               <option>Expired</option>
               <option>Not Expired</option>
            </select>
         </p>

         <!-- Products Output -->
         <span><strong>Department | Product | Price ($) | Shelf Life</strong></span>
         <div id="productOutput">[Print Products here...]</div>
      </form>
   </fieldset>
   <br>

   <!-- Waste Calculator -->
   <fieldset>
      <legend>Waste Calculator</legend>
      <form>
         <!-- Filter -->
         <p>
            Calculate Waste By Department:
            <select id="sbDepartmentFilter" onchange="calculateWaste();">
               <option selected>Entire Store</option>
               <option>Bakery</option>
               <option>Dairy</option>
               <option>Deli</option>
               <option>Produce</option>
               <option>Vegan</option>
            </select>
         </p>

         <!-- Products Output -->
         <div id="wasteOutput">[Select a department]</div>
      </form>
   </fieldset>

   <script>


      // Global array
      var products = [];

      // Some products
      products.push(new Product("Avacados", "Produce", 8.99, new Date("June 27, 2019")));
      products.push(new Product("Baguette", "Bakery", 5.99, new Date("July 30, 2019")));
      products.push(new Product("Beef", "Deli", 14.99, new Date("April 1, 2019")));
      products.push(new Product("Pears", "Produce", 5.50, new Date("April 2, 2019")));
      products.push(new Product("2L Chocolate Milk", "Dairy", 4.99, new Date("March 21, 2019")));
      products.push(new Product("Pumpkin Pie", "Bakery", 10.50, new Date("March 13, 2019")));
      products.push(new Product("Grapes", "Produce", 6.99, new Date("February 1, 2018")));
      products.push(new Product("Loaf of Bread", "Bakery", 5.99, new Date("March 30, 2019")));
      products.push(new Product("Cheddar Cheese", "Dairy", 10.99, new Date("March 14, 2019")));
      products.push(new Product("Margarine", "Dairy", 8.99, new Date("June 14, 2017")));
      products.push(new Product("Salami", "Deli", 5.99, new Date("March 13, 2019")));
      products.push(new Product("Oranges", "Produce", 7.50, new Date("May 2, 2019")));
      products.push(new Product("Chicken", "Deli", 21.99, new Date("March 22, 2019")));
      products.push(new Product("Turkey", "Deli", 14.99, new Date("April 3, 2019")));
      products.push(new Product("Peppers", "Produce", 3.99, new Date("March 27, 2019")));
      products.push(new Product("Ham", "Deli", 9.99, new Date("May 5, 2019")));
      products.push(new Product("Chocolate Cake", "Bakery", 19.99, new Date("October 10, 2007"))); // The Cake is a Lie!
      products.push(new Product("10kg White Flour", "Bakery", 12.99, new Date("September 30, 2020")));

      // TODO: Constructor function and methods...
      function Product(name, dept, price, exp) {
         this.productName = name;
         this.department = dept;
         this.price = price;
         this.expireDate = exp;

         this.isExpired = function () {
            //var expired;
            //current time - exp time = difference 
            // compares in milliseconds, if positive value, date has passed.
            if (Math.abs(Date.now() - products[i].expireDate.getTime() <= 0)) {
               return false;
            }
            else {
               return true;
            }
         }

         this.outputString = function () {
            var output = "";
            for (i = 0; i < products.length; i++) {
               output +=
                  products[i].department + " | " +
                  products[i].productName + " | " +
                  products[i].price + " | ";

               if (this.isExpired() == true) {
                  output += "Expired" + "</br>";
               }
               else if (this.isExpired() == false) {
                  output += "Not Expired" + "</br>";
               }
            }
            return output;
         }
      }

      // TODO: displayProducts() function... 
      function displayProducts() {
         var productOutput = document.getElementById("productOutput");
         var filterProducts = document.getElementById("sbProductsFilter");

         productOutput.innerHTML = "";

         if (filterProducts.value == "All") {
            for (i = 0; i < products.length; i++) {
               productOutput.innerHTML = products[i].outputString();
            }
         }

         if (filterProducts.value == "Expired") {
            for (i = 0; i < products.length; i++) {
               if (products[i].isExpired() == true) {
                  console.log("hello");
                  productOutput.innerHTML = products[i].outputString();
               }
            }
         }

         if (filterProducts.value == "Not Expired") {
            for (i = 0; i < products.length; i++) {
               if (products[i].isExpired() == false) {
                  console.log("hello");
                  productOutput.innerHTML = products[i].outputString();
               }
            }
         }
      }


    // TODO: Calculate Waste Function




   </script>
</body>

Does this answer your question? [Get selected value in dropdown list using JavaScript](https://stackoverflow.com/questions/1085801/get-selected-value-in-dropdown-list-using-javascript) — AP., Dec 02 '19 at 01:18
No, because I'm not supposed to change the HTML. The HTML was starter code from my teacher for this project. — Matt Bender, Dec 02 '19 at 01:21
It doesn't have to be the same exact HTML, it merely needs to be similar enough so that you can figure out how the other Q/A could be applied to your situation. — Dexygen, Dec 02 '19 at 01:25
My console logs are showing it gets into the if statement fine, so I guess getting the value from the dropdown isn't my problem like I thought. But it's not modifying the output. It just outputs all the objects in the products array, no matter what value is selected from dropdown. — Matt Bender, Dec 02 '19 at 01:35

score 0 · Answer 1 · answered Dec 02 '19 at 03:10

Okay, I found why this isn't working as you expect it to.

1) Your isExpired function in your Product object is not doing what you wanted. Try

 this.isExpired = function () {
             const today = new Date();
             // notice that you were taking Math.Abs which defeats the purpose of the subtraction
             if ( today - this.expireDate < 0 ) {
                return false;
             }
             else {
                return true;
             }
          }

2) Your outputString function in your product should be doing it per Product and not for all products.

 this.outputString = function () {
                var output = "";

                output +=
                   this.department + " | " +
                   this.productName + " | " +
                   this.price + " | ";

                if (this.isExpired() == true) {
                   output += "Expired" + "</br>";
                }
                else if (this.isExpired() == false) {
                   output += "Not Expired" + "</br>";
                }

             return output;
          }

3) Change your displayProducts function to append to the productOutput.innerHTML and you will see that everything should work.

For reference, this is what I have for your displayProducts method

function displayProducts() {
          var productOutput = document.getElementById("productOutput");
          var filterProducts = document.getElementById("sbProductsFilter");

          productOutput.innerHTML = "";

          if (filterProducts.value == "All") {
             for (i = 0; i < products.length; i++) {
                productOutput.innerHTML += products[i].outputString();
             }
          }

          if (filterProducts.value == "Expired") {
             for (i = 0; i < products.length; i++) {
                if (products[i].isExpired() == true) {
                   console.log("hello");
                   productOutput.innerHTML += products[i].outputString();
                }
             }
          }

          if (filterProducts.value == "Not Expired") {
             for (i = 0; i < products.length; i++) {
                if (products[i].isExpired() == false) {
                   console.log("hello");
                   productOutput.innerHTML += products[i].outputString();
                }
             }
          }
       }

See https://codepen.io/nbuss848/pen/MWYWWzo for the full working example.

Please mark this question as answered :) https://meta.stackexchange.com/questions/147531/how-mark-my-question-as-answered-on-stack-overflow — Neil Busse, Dec 03 '19 at 00:18

score -1 · Answer 2 · answered Dec 02 '19 at 01:24

-1

Even though this is a duplicate, this is how you can do it in your case:

const e = document.querySelector('#sbDepartmentFilter')
const selectedValue = e.options[e.selectedIndex]

answered Dec 02 '19 at 01:24

AP.

8,082
2
24
33

Filter output based on value from dropdown select

2 Answers2