SixTailedFox SixTailedFox - 2 months ago 10
jQuery Question

jQuery looping through an object array

I have the following HTML and JS, I am trying to only display elements if they match the criteria selected in the

<select>
tags. I am fairly sure that my IF statement currently would not achieve what I am trying to do even if it did work, however I am struggling to think of the logic for this.

HTML:

<select id="price-from" class="form-control">
<option selected value="£500">£500</option>
<option value="1000">£1,000</option>
<option value="2000">£2,000</option>
<option value="3000">£3,000</option>
<option value="4000">£4,000</option>
<option value="5000">£5,000</option>
<option value="10000">£10,000</option>
<option value="20000">£20,000</option>
</select>

<p>To</p>

<select id="price-to" class="form-control">
<option value="500">£500</option>
<option value="1000">£1,000</option>
<option value="2000">£2,000</option>
<option value="3000">£3,000</option>
<option value="4000">£4,000</option>
<option value="5000">£5,000</option>
<option value="10000">£10,000</option>
<option selected value="20000">£20,000</option>
</select>


JavaScript:

$(document).ready(function(){
var product1 = {title:"Cute Gnome", type:"Cute", price:"3999"};
var product2 = {title:"Funny Gnome", type:"Funny", price:"5999"};
var product3 = {title:"Seasonal Gnome", type:"Seasonal", price:"12999"};
var product4 = {title:"Horror Gnome", type:"Horror", price:"7999"};
var productArray = [
product1, product2, product3, product4
];
var len = productArray.length;
for (var i = 0; i < len; i++) {
if ($("#price-from").val() < productArray[i].price && $("#price-to").val() > productArray[i].price){
//Loop through code and only output objects between both price criteria
}
}
});

Answer

You need to bind the change event to select elements. Additionally you should to convert string to Number before comparison. use .filter()

$('select').on('change', function() {
    var priceFrom = +$("#price-from").val(); //Convert value to Number
    var priceTo = +$("#price-to").val(); //Convert value to Number

    //Filter the elements which matches the condition
    var matchingElemets = productArray.filter(function(pd) {
        var p = +pd.price; //Convert value to Number
        return p >= priceFrom && p <= priceTo;
    });
    console.clear();
    console.log(matchingElemets);
});

$(document).ready(function() {
  var product1 = {
    title: "Cute Gnome",
    type: "Cute",
    price: "3999"
  };
  var product2 = {
    title: "Funny Gnome",
    type: "Funny",
    price: "5999"
  };
  var product3 = {
    title: "Seasonal Gnome",
    type: "Seasonal",
    price: "12999"
  };
  var product4 = {
    title: "Horror Gnome",
    type: "Horror",
    price: "7999"
  };
  var productArray = [
    product1, product2, product3, product4
  ];

  $('select').on('change', function() {
    var priceFrom = +$("#price-from").val(); //Convert value to Number
    var priceTo = +$("#price-to").val(); //Convert value to Number
    var matchingElemets = productArray.filter(function(pd) {
      var p = +pd.price; //Convert value to Number
      return p >= priceFrom && p <= priceTo;
    });
    console.clear();
    console.log(matchingElemets)
  });
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select id="price-from" class="form-control">
  <option selected value="£500">£500</option>
  <option value="1000">£1,000</option>
  <option value="2000">£2,000</option>
  <option value="3000">£3,000</option>
  <option value="4000">£4,000</option>
  <option value="5000">£5,000</option>
  <option value="10000">£10,000</option>
  <option value="20000">£20,000</option>
</select>

<p>To</p>

<select id="price-to" class="form-control">
  <option value="500">£500</option>
  <option value="1000">£1,000</option>
  <option value="2000">£2,000</option>
  <option value="3000">£3,000</option>
  <option value="4000">£4,000</option>
  <option value="5000">£5,000</option>
  <option value="10000">£10,000</option>
  <option selected value="20000">£20,000</option>
</select>