Javascript For loop not running as expected?

Question

I'm trying to create a filter system which allows a user to enter a price, so only festivals in the array which have a lower price will be alerted. However instead the program displays all of the festivals. Thanks for any replies.

Code:

var festivals = [
   ["Reading", "Richfield Avenue", 205, "24th - 26th August", "Rock"],
   ["Park Life", "Manchester", 140, "8th - 9th June", "Dance"],
   ["Glastonbury", "Somerset", 250, "23rd - 25th June", "Alternative"]
];
var filterfestivals = [[]];
var maxuserprice = document.getElementById("maxprice").value;

function filter() {
  for (var i = 0; i < festivals.length; i++)
    if (maxuserprice < festivals[i][2]) {
      filterfestivals.push(festivals[i])
      alert(filterfestivals)
      //i = i + 1
    }
}

<p1> Please enter your maximum spending price </p1>
<input id="maxprice"> </input>
<button onclick="filter()"> Filter </button>

Possible duplicate of [Obtain smallest value from array in Javascript?](https://stackoverflow.com/questions/8934877/obtain-smallest-value-from-array-in-javascript) — Kiran Joshi, Jul 18 '18 at 09:54

Nikhil Aggarwal · Answer 1 · 2018-07-18T09:56:29.863

You need to do following

move the variables filterfestivals and maxuserprice inside the click function as these need to have the latest value and not the value at time of page load.
Initialize filterfestivals as an empty array.
maxuserprice is a string and it should be converted to number. Though it still worked in this case as in less than comparison (<), type is coerced to number.

var festivals = [["Reading","RichfieldAvenue",205,"24th-26thAugust","Rock"],["ParkLife","Manchester",140,"8th-9thJune","Dance"],["Glastonbury","Somerset",250,"23rd-25thJune","Alternative"]];

function filter() {
  var filterfestivals = [];
  var maxuserprice = Number(document.getElementById("maxprice").value);
  for (var i = 0; i < festivals.length; i++)
    if (maxuserprice < festivals[i][2]) {
      filterfestivals.push(festivals[i])
      alert(filterfestivals)
    }
}

<p1> Please enter your maximum spending price </p1>
<input id="maxprice"> </input>
<button onclick="filter()"> Filter </button>

score 0 · Answer 2 · answered Jul 18 '18 at 09:50

maxuserprice will always be initial value ('' in this case). You should set new value in filter function and also you should clear filtered array first and don't use [[]] as it doesn't mean two dimensional array, it only initializes array with an empty array for it's first element.

var filterfestivals = [];

function filter () {
    filterfestivals = [];
    var maxuserprice = Number(document.getElementById("maxprice").value);
    for (var i = 0; i < festivals.length; i++) {
        if (maxuserprice < festivals[i][2]){
            filterfestivals.push(festivals[i])
        }
    }
}

score 0 · Answer 3 · answered Jul 18 '18 at 09:54

You should read the price when you click the button otherwise it is initialized before any input is provided (you should also convert the input to a number)

You also need to reset the filterfestivals array on each filter call, so that they do not add up.

Finally your current check does the opposite, it allows only those with a price higher than the input to show up.

//  Festival[x][0]   city[x][1]     cost[x][2]    date[x][3]    genre[x][4]

var festivals = [
  ["Reading", "Richfield Avenue", 205, "24th - 26th August", "Rock"],
  ["Park Life", "Manchester", 140, "8th - 9th June", "Dance"],
  ["Glastonbury", "Somerset", 250, "23rd - 25th June", "Alternative"]
];
var filterfestivals = [];

function filter() {
  var maxuserprice = parseFloat(document.getElementById("maxprice").value);
  filterfestivals = [] // empty the filterfestival array so that we can filter multiple times
  for (var i = 0; i < festivals.length; i++)
    if (maxuserprice >= festivals[i][2]) {
      filterfestivals.push(festivals[i])
      //i = i + 1
    }
    alert(filterfestivals.join('\n'))
}

<p1> Please enter your maximum spending price </p1>
<input id = "maxprice"> </input>
<button onclick = "filter()"> Filter </button>

Alternatively, there is a filter method on the Array object that is simpler to use.

so

//  Festival[x][0]   city[x][1]     cost[x][2]    date[x][3]    genre[x][4]

var festivals = [
  ["Reading", "Richfield Avenue", 205, "24th - 26th August", "Rock"],
  ["Park Life", "Manchester", 140, "8th - 9th June", "Dance"],
  ["Glastonbury", "Somerset", 250, "23rd - 25th June", "Alternative"]
];
var filterfestivals = [];

function filter() {
  var maxuserprice = parseFloat(document.getElementById("maxprice").value);
  filterfestivals = festivals.filter(function(festival) {
    return festival[2] <= maxuserprice;
  });
  alert(filterfestivals.join('\n'))
}

<p1> Please enter your maximum spending price </p1>
<input id="maxprice"> </input>
<button onclick="filter()"> Filter </button>

score -1 · Answer 4 · answered Jul 18 '18 at 10:01

Was so much wrong with it but this is the entire code working.

From editing input to pretty much everything in the JS. Just read over it carefully and learn from it.

<!DOCTYPE html>
<html>

<head>
</head>

<body> 
<p1> Please enter your maximum spending price </p1>
<input type="number" id="maxprice"/>
<button onclick = "filter()"> Filter </button>


      <script>
      //               Festival[x][0]   city[x][1]           cost[x][2]    date[x][3]         genre[x][4]
      var festivals = [
                      ["Reading",       "Richfield Avenue",  205,         "24th - 26th August",  "Rock"],
                      ["Park Life",     "Manchester",        140,         "8th - 9th June",      "Dance"],
                      ["Glastonbury",   "Somerset",          250,         "23rd - 25th June",    "Alternative"]
                      ];
      var filterfestivals = [[]];


      function filter(){
        filterfestivals = [[]];
      var maxuserprice = document.getElementById("maxprice").value;
        for (var i = 0; i < festivals.length; i++) {
            if (festivals[i][2] < maxuserprice){
                filterfestivals.push(festivals[i])
            }
        }
        alert(filterfestivals)
      }
      </script>
    </body>
</html>

Javascript For loop not running as expected?

4 Answers4