Array.find method alternative in jQuery?

Question

I am using the Array.find method from this question I asked earlier and I have realized that it is not supported in IE. Is there a jQuery equivalent or even a different Javascript equivalent which is supported in IE?

var zones = [{
    "zone": "one",
    "zipcodes": ["69122", "69125", "69128", "69129"]
  },
  {
    "zone": "two",
    "zipcodes": ["67515", "67516", "67518", "67521"]
  }
];

$(function() {
  $('#userZip').submit(function(e) {
    e.preventDefault();
    var userZip = $('input[type="text"]').val();
    var zone = zones.find(function(zone) {
      return zone.zipcodes.indexOf(userZip) > -1;
    });
    alert("Zone: " + zone.zone);
  });
});

i {
  display: block;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form id="userZip">
  <i>Enter zip code "69122" as an example</i>
  <input type="text" placeholder="zip" />
  <input type="submit" />
</form>

Why not just patch it in legacy browsers? Relying on large libraries for simple compatibility patches doesn't seem like the best approach. — user1106925
– user1106925, Commented May 9, 2017 at 16:57
jQuery is already included in this project for other reasons so it wouldn't be adding anything. — user13286
– user13286, Commented May 9, 2017 at 17:01

Dalcof · Accepted Answer · 2017-11-21 09:44:33Z

1

A polyfill:

Array.prototype.find = Array.prototype.find || function (callback) {
    for (var i = 0; i < this.length; i++) {
      if (callback(this[i], i)) {
        return this[i];
      }
    }
};

If you want a better one, look under the polyfill section of the first link youve provided...

edited Nov 21, 2017 at 9:44

Dalcof

1647 bronze badges

answered May 9, 2017 at 17:00

Jonas Wilms

139k20 gold badges164 silver badges164 bronze badges

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

Comments

Nat Wallbank · Accepted Answer · 2017-05-09 16:53:07Z

1

IE9+ supports Array.filter if that's good enough?

https://developer.mozilla.org/en/docs/Web/JavaScript/Reference/Global_Objects/Array/filter

Obviously you'll potentially get multiple results so will need to just select the first, if that's your intention.

answered May 9, 2017 at 16:53

Nat Wallbank

1,45713 silver badges12 bronze badges

Comments

Mμ. · Accepted Answer · 2017-05-09 17:07:50Z

1

Or, you can also use a standard for loop?

var zones = [{
    "zone": "one",
    "zipcodes": ["69122", "69125", "69128", "69129"]
  },
  {
    "zone": "two",
    "zipcodes": ["67515", "67516", "67518", "67521"]
  }
];

function findZone(zns, zip) {
  var zone = {};
  for (var i = 0; i < zns.length; i++) {
    for (var j = 0; j < zns[i].zipcodes.length; j++) {
      if (zip === zns[i].zipcodes[j]) {
        zone = zns[i];
        break;
      }
    }
  }
  return zone;
}

console.log(findZone(zones, "67515"))

answered May 9, 2017 at 17:07

Mμ.

8,5723 gold badges28 silver badges36 bronze badges

Comments

Gerard · Accepted Answer · 2017-05-09 17:47:21Z

0

A function using jQuery:

$(function() {
  $('#userZip').submit(function(e) {
    e.preventDefault();
    var userZip = $('input[type="text"]').val();
    var zone = $.grep(zones, function (element, index) {
      if ($.inArray( userZip, element.zipcodes ) > -1) return true;
    });
    alert("Zone: " + zone[0].zone);
  });
});

fiddle here: https://jsfiddle.net/beekvang/p76f1zev/

answered May 9, 2017 at 17:47

Gerard

15.8k5 gold badges33 silver badges53 bronze badges

Comments

Kunal · Accepted Answer · 2019-04-04 16:55:04Z

0

jQuery.grep works similar to Array's find method in that it operates on Array-Like objects and filters using a provided function. The result is a new array with only those elements included that pass the test. It also has an optional invert argument.

e.g. for your code

var filteredZones = $.grep(zones, function(zone) {
  return zone.zipcodes.indexOf(userZip) > -1;
});

if (filteredZones.length) {
  var zone = filteredZones[0];
}

You can read more about it here - http://api.jquery.com/jquery.grep/

answered Apr 4, 2019 at 16:55

Kunal

5102 gold badges9 silver badges19 bronze badges

Collectives™ on Stack Overflow

Array.find method alternative in jQuery?

5 Answers 5

Comments

Comments

Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

5 Answers 5

Comments

Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related