jQuery looping through an object array

Question

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
        }
    }
});

Do you have any errors in the console? (F12)

George Kagan
– George Kagan

2016-09-21 11:45:06 +00:00
Commented Sep 21, 2016 at 11:45 — George Kagan
– George Kagan, Commented Sep 21, 2016 at 11:45

Satpal · Accepted Answer · 2016-09-21 11:43:33Z

2

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>

answered Sep 21, 2016 at 11:43

Satpal

134k13 gold badges168 silver badges171 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Mcar49 Over a year ago

Thank you, both this and @Jamiec's answer appear to work. Would you be able to run through roughly what this is doing? I'm new to JS, and would love to understand what is actually happening.

Satpal Over a year ago

@SixTailedFox Jamiec's answer is very similar to mine only difference is conversion to number I have use + operator where as he used parseInt()

Raoul Mensink · Accepted Answer · 2016-09-21 11:53:52Z

Code below add it to the onchange Attribute on both of the selects and you have a Framework Independent solution that Returns the list.

Ofcourse you will have to add your own logic to Change displayed products.

Do note that haveing a .ready doesnt really do annything here since it is (should be) an Event driven Action.

function filter()
{
//reduces calls to DOM in for loop
var min = document.getElementById("price-from").value;
var max = document.getElementById("price-to").value;

var length = productArray.length;
var products = [];

for (var i = 0; i < length; i++) {
    if (min <= productArray[i].price && max > productArray[i].price) {
        products.push(productArray[i]);
    }
}

return products;
}

Jamiec · Accepted Answer · 2016-09-21 11:57:39Z

You presumably want to do this whenever one of the select boxes is changed, so the thing to do is hook into the change event on both and run your code. You dont specify what you mean by "output" so I'll just output to the console.

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 from = parseInt($('#price-from').val(),10);
   var to = parseInt($('#price-to').val(),10);
   var matches = productArray.filter(function(x){
     var price = parseInt(x.price,10);
     return from <= price && to >= price;
   });
  console.clear();
   console.log(matches);
});

<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>

Roughly what this code is doing is as follows

var from = parseInt($('#price-from').val(),10);
var to = parseInt($('#price-to').val(),10);

These two lines take the values of your two select boxes, and parse their value to an integer. See parseInt

var matches = productArray.filter(function(x){
 var price = parseInt(x.price,10);
 return from <= price && to >= price;
});

This line uses filter to get the items from your original list which fall within the range of prices selected. See Array.filter

console.clear();
console.log(matches);

These lines simply clear and then output the items from the array which match your prices to the console. You could easily iterate over this list and output to the page iif required.

This seems to work just fine. By outputting I mean to display to the page :) Could you explain what this code is actually doing? I'm new to JS and would be grateful if you could help me understand it. Thanks for your solution!

Collectives™ on Stack Overflow

jQuery looping through an object array

3 Answers 3

2 Comments

Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

2 Comments

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related