How to create an array with certain variable length and the same value repeated without using .fill?

Question

I'm creating a graph thanks to Chart.js, in a project of ASP.NET MVC, and in the view, I need to create an array with a value, but the length of the array is variable, I used the ".fill" and worked great, but in IE11 doesn't work so I need another way.

I have been searching the web but I haven't found any clean way to do it, and my knowledge is very limited because I have just started working with JS.

This is what I was using but doesn't work on IE11

var arrayBackgroundColor = Array(@Model.Data.Count()).fill('rgba(54, 162, 235, 0.2)');

(the @Model.Data.Count() is an integer corresponding with the length it must have)

This is the answer from IE11 on the console error

SCRIPT438: Object doesn't support property or method 'fill'

So, I would really appreciate another way of creating the desired array.

I thought about that but if the array is too big it would affect performance, right? I was searching for something cleaner like .fill() @Lewis — Miguel Cordero, Mar 26 '19 at 09:36
This may help you : https://stackoverflow.com/questions/1295584/most-efficient-way-to-create-a-zero-filled-javascript-array?rq=1#answer-44726020 . This example uses `.concat` and `.slice`. Both are supported by IE11 (even lowers), this may be an easily reusable solution. https://jsfiddle.net/aLh2fbkz/ . otherwise, use `.map` — briosheje, Mar 26 '19 at 09:43

Jack Bashford · Answer 1 · 2019-03-26T09:54:02.093

2

Use map:

var arrayBackgroundColor = Array.apply(null, Array(@Model.Data.Count())).map(function(e) {
    return 'rgba(54, 162, 235, 0.2)';
});

edited Mar 26 '19 at 09:54

answered Mar 26 '19 at 09:38

Jack Bashford

43,180
11
50
79

You mean the arrow function @Lewis? I'll fix that. – Jack Bashford Mar 26 '19 at 09:39
Nope - http://kangax.github.io/compat-table/es5/#test-Array_methods_Array.prototype.map_a_href=_https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/map_title=_MDN_documentation_img_src=_../mdn.png_alt=_MDN_(Mozilla_Development_Network)_logo_width=_15_height=_13_/_/a_nbsp; – Jack Bashford Mar 26 '19 at 09:41
That's the link from CanIUse by the way. – Jack Bashford Mar 26 '19 at 09:41
1

You were looking at `flat` and `flatMap` (and possibly the `Map` object which is different). – Jack Bashford Mar 26 '19 at 09:41
1

My bad, will remove my comment =) – Lewis Mar 26 '19 at 09:42
[this does not work](https://stackoverflow.com/questions/5501581/javascript-new-arrayn-and-array-prototype-map-weirdness) – Bergi Mar 26 '19 at 09:49
My apologies @Bergi - I will edit my answer. – Jack Bashford Mar 26 '19 at 09:53
1

@Bergi I have edited my answer - any better? (I have tested it and it works) – Jack Bashford Mar 26 '19 at 09:54

score 1 · Accepted Answer · answered Mar 26 '19 at 09:35

1

You can use a normal for loop

let arrayBackgroundColor =[]; 

for(var i = 0;i<@Model.Data.Count();i++){
  arrayBackgroundColor .push('rgba(54, 162, 235, 0.2)')
});

or you can use this Polyfill

answered Mar 26 '19 at 09:35

brk

48,835
10
56
78

thought about that but if the array is too big it would affect performance, right? I was searching for something cleaner like .fill() – Miguel Cordero Mar 26 '19 at 09:37
@MiguelCordero you can check the polyfil and `for..` loop is elementary, Even in the polyfil which is created by mdn , is using a `while` loop – brk Mar 26 '19 at 09:39
thanks, I used and it works as expected – Miguel Cordero Mar 26 '19 at 10:49

cooper667 · Answer 3 · 2019-03-26T09:50:50.863

Polyfill .fill()

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/fill#Polyfill

if (!Array.prototype.fill) {
  Object.defineProperty(Array.prototype, 'fill', {
    value: function(value) {

      // Steps 1-2.
      if (this == null) {
        throw new TypeError('this is null or not defined');
      }

      var O = Object(this);

      // Steps 3-5.
      var len = O.length >>> 0;

      // Steps 6-7.
      var start = arguments[1];
      var relativeStart = start >> 0;

      // Step 8.
      var k = relativeStart < 0 ?
        Math.max(len + relativeStart, 0) :
        Math.min(relativeStart, len);

      // Steps 9-10.
      var end = arguments[2];
      var relativeEnd = end === undefined ?
        len : end >> 0;

      // Step 11.
      var final = relativeEnd < 0 ?
        Math.max(len + relativeEnd, 0) :
        Math.min(relativeEnd, len);

      // Step 12.
      while (k < final) {
        O[k] = value;
        k++;
      }

      // Step 13.
      return O;
    }
  });
}

How to create an array with certain variable length and the same value repeated without using .fill?

3 Answers3