Am trying to implement w2ui multi select in one of d3 charts which am working on.

This is the link to sample jsfiddle with the problem.

I have three function :

//get a column of an array
Array.prototype.getColumn = function(name) {
  return this.map(function(el) {
    // gets corresponding 'column'
    if (el.hasOwnProperty(name)) return el[name];
    // removes undefined values
  }).filter(function(el) {
    return typeof el != 'undefined';
  });
};
//remove duplicates in an array
Array.prototype.contains = function(v) {
  for (var i = 0; i < this.length; i++) {
    if (this[i] === v) return true;
  }
  return false;
};
Array.prototype.unique = function() {
  var arr = [];
  for (var i = 0; i < this.length; i++) {
    if (!arr.contains(this[i])) {
      arr.push(this[i]);
    }
  }
  return arr;
}

I need to implement these three in one of my functions.

Problem is that, whenever I try to implement these functions with Array.prototype I get items in the multiselect as "undefined". The number of "undefined" is directly propotional to the number of functons with Array.prototype functions.

If I remove these functions, I can get the multi-select to work properly(only the multi-select part, not the chart as a whole. I don't understand, what's causing the error.

Any help is appreciated. Thanks.

Am trying to implement w2ui multi select in one of d3 charts which am working on.

This is the link to sample jsfiddle with the problem.

I have three function :

//get a column of an array
Array.prototype.getColumn = function(name) {
  return this.map(function(el) {
    // gets corresponding 'column'
    if (el.hasOwnProperty(name)) return el[name];
    // removes undefined values
  }).filter(function(el) {
    return typeof el != 'undefined';
  });
};
//remove duplicates in an array
Array.prototype.contains = function(v) {
  for (var i = 0; i < this.length; i++) {
    if (this[i] === v) return true;
  }
  return false;
};
Array.prototype.unique = function() {
  var arr = [];
  for (var i = 0; i < this.length; i++) {
    if (!arr.contains(this[i])) {
      arr.push(this[i]);
    }
  }
  return arr;
}

I need to implement these three in one of my functions.

Problem is that, whenever I try to implement these functions with Array.prototype I get items in the multiselect as "undefined". The number of "undefined" is directly propotional to the number of functons with Array.prototype functions.

If I remove these functions, I can get the multi-select to work properly(only the multi-select part, not the chart as a whole. I don't understand, what's causing the error.

Any help is appreciated. Thanks.

• javascript
• arrays
• w2ui

Share Improve this question Follow edited Jun 24, 2016 at 9:40 altocumulus 21.6k1313 gold badges6464 silver badges8686 bronze badges asked Jun 19, 2016 at 22:07 driftking9987driftking9987 1,71322 gold badges3333 silver badges6464 bronze badges 13

• 6 And you've just learned why it's a bad idea to modify native prototypes. Now make those regular functions instead. – adeneo Commented Jun 19, 2016 at 22:12
• 1 And you've just learned why it's a bad idea to do anything without having a whole plan for your execution environment. You can modify native prototypes with no problem as long as you require coding standards that don't conflict with that decision. – user1106925 Commented Jun 19, 2016 at 22:17
• So If I implement the functionalities as separate function, it'll work? – driftking9987 Commented Jun 19, 2016 at 22:36
• Libraries that don't respect the fact that JS is a shared environment may, for example, use for-in to iterate an Array. Because this includes all enumerable properties (including inherited ones), it can bump into your extensions. Personally, I'd file a bug report, but that's up to you. Or just take adeneo's advice. – user1106925 Commented Jun 19, 2016 at 22:43
• ...and by the way, this problem isn't unique to custom extensions. You'd have the same problem with polyfills, and they should take that into account if their library supports IE8. – user1106925 Commented Jun 19, 2016 at 23:06

 |  Show 8 more ments

1 Answer 1

Sorted by: Reset to default 9

In general messing with the core javascript objects is a bad idea when you are working with the third party libraries. If you still want to keep it this way and solve this particular problem use the Object.defineProperty method, turning off the enumerable bit

So for example change

Array.prototype.contains = function(v) {
  for (var i = 0; i < this.length; i++) {
    if (this[i] === v) return true;
  }
  return false;
};

to

Object.defineProperty(Array.prototype, 'contains', {
    enumerable: false,
    value: function(v) {
        for (var i = 0; i < this.length; i++) {
            if (this[i] === v) return true;
        }
        return false;
    }
});

and similar for other prototype method that you have added.