23

I looked it up and found this regarding finding a substring in a larger string in an array. Array.Prototype.includes

if (t.title.includes(searchString))

My t is part of a $.each that's iterating through a larger array of objects (each objects got a buttload of info, from strings, dates and such). searchString is whatever the user typed in a box. All this is a simple search function for a list I have on the page.

This works just fine in Chrome. But Firefox and IE are turning up errors stating

TypeError: currentTicket.title.includes is not a function

So I either put up a warning sign that my app only works on Chrome or I handcraft a find function? Weird thing is the doc page from MDN I posted states that only Firefox supports the array.includes, strangely enough it's only Chrome that runs it.

cbdeveloper
  • 27,898
  • 37
  • 155
  • 336
Thaenor
  • 611
  • 1
  • 9
  • 28
  • 4
    So basically a function that doesn't work in any browser except *maybe* the newest versions of Chrome and Firefox and you're wondering why it's not working? This function should be easy to polyfill btw, it's right there in the link you posted. – adeneo May 26 '15 at 14:37
  • 3
    I'm voting to close this question as off-topic because the solution is posted in the question ! – adeneo May 26 '15 at 14:39
  • 2
    BTW you're not using `Array.prototype.includes`, but rather `String.prototype.includes`. You might just as well use the common `indexOf` method of doing this sort of thing. – Qantas 94 Heavy May 26 '15 at 14:40
  • Tried utilizing `Array.prototype.some` ? – guest271314 May 26 '15 at 14:40
  • 1
    @adeneo It's not that black and white. I just added the relevant documentation towards my question, but I don't know quite well what it means. I'm not sure what a polyfil is or how to use it (refer to my comment on the other answer). As for using indexof, I'm getting the same error from Firefox and IE – Thaenor May 26 '15 at 14:48
  • What exactly is `currentTicket.title`, and what are you trying to match. If you show what you're trying to do, there's probably a better cross-browser way to do it. – adeneo May 26 '15 at 15:16
  • https://kangax.github.io/compat-table/es6/ – kangax May 28 '15 at 18:47
  • @Thaenor: mark the highest upvoted answer as accepted, i'm pretty sure that it also solved your problem. – Tim Schmelter Nov 30 '18 at 17:53

2 Answers2

47

Instead of using an API that is currently marked as "experimental" consider using a more broadly supported method, such as Array.prototype.indexOf() (which is also supported by IE).

Instead of t.title.includes(string) you could use t.title.indexOf(string) >= 0

You can also use Array.prototype.filter() to get a new array of strings that meet a certain criteria, as in the example below.

var arr = ["one", "two", "three", "four", "five", "six", "seven", "eight", "nine", "ten"];
document.getElementById("input").onkeyup = function() {
  document.getElementById("output").innerHTML = arrayContainsString(arr,this.value);
}
document.getElementById("header").innerHTML = JSON.stringify(arr);

function arrayContainsString(array, string) {
  var newArr = array.filter(function(el) {
    return el.indexOf(string) >= 0;
  });
  return newArr.length > 0;
}
<input id="input" type="text" />
<br/>
<div>array contains text:<span id="output" />
</div>
<div id="header"></div>
Thriggle
  • 7,009
  • 2
  • 26
  • 37
5

As the MDN article you linked to says, Firefox only supports .includes in nightly builds, other browsers didn't support it at all at the time the article was last updated (Chrome may have been updated to support it at a later time). If you want to support all browsers, you can use the polyfill outlined in the same article:

if (![].includes) {
  Array.prototype.includes = function(searchElement /*, fromIndex*/ ) {
    'use strict';
    var O = Object(this);
    var len = parseInt(O.length) || 0;
    if (len === 0) {
      return false;
    }
    var n = parseInt(arguments[1]) || 0;
    var k;
    if (n >= 0) {
      k = n;
    } else {
      k = len + n;
      if (k < 0) {k = 0;}
    }
    var currentElement;
    while (k < len) {
      currentElement = O[k];
      if (searchElement === currentElement ||
         (searchElement !== searchElement && currentElement !== currentElement)) {
        return true;
      }
      k++;
    }
    return false;
  };
}

However, it sounds like your problem has a better solution, but it's hard to tell without any specifics.

Etheryte
  • 24,589
  • 11
  • 71
  • 116
  • What exactly is a Polyfill and how do I apply it on my js? Sorry, I tried Googling this one but I couldn't find anything relevant. – Thaenor May 26 '15 at 14:45
  • 3
    [The first result from Google](https://remysharp.com/2010/10/08/what-is-a-polyfill) covers the subject rather well: a polyfill is a piece of code that ensures a browser has certain functionality available (like `Array.prototype.includes`) regardless of whether it's supported natively. You'll want to include it somewhere on your page before you want to use the method, so most likely as early as possible. – Etheryte May 26 '15 at 15:10
  • I tried copying that piece of code but it doesn't do anything. Does it act like a normal function or... – Thaenor May 26 '15 at 16:08
  • 1
    If the above doesn't address your issue then it's likely your target object isn't an array to begin with. Impossible to tell without more code. – Etheryte May 26 '15 at 16:22