How to set values to array using foreach

Question

How can I add values to an array using a loop. I have been added values to the array by hard cording values, but I need to add huge data to an array.so its so difficult to by hard coding. this part of my JS code.

function BModel(checkInOrEdit) {
    "use strict";
    this.Number = ko.observable("");
    this.Years = ko.observableArray(['', '2019', '2018', '2017', '2016', '2015', '2014', '2013', '2012', '2011', '2010', '2009', '2008', '2007', '2006', '2005', '2004', '2003', '2002', '2001', '2000']);
}

BModel.prototype = {

    addTo: function (isSupervised) {
        "use strict";
        this.fname($.trim(this.fname()));
        this.lname($.trim(this.lname()));

    },

    AcDone: function (result, stat) {
        "use strict";
        var validationResults = JSON.parse(result.d);
        var msgTitle = '';
    }
}


$(document).ready(function () {

});

I need to add values to Years since this year up to 1900.how can I do this. Currently, I'm hard corded.

this.Years = ko.observableArray(['', '2019', '2018', '2017', '2016', '2015', '2014', '2013', '2012', '2011', '2010', '2009', '2008', '2007', '2006', '2005', '2004', '2003', '2002', '2001', '2000']);

user3297291 · Accepted Answer · 2019-07-04 09:35:36Z

3

I would advice to create a helper that returns a range of numbers in a regular array first. Then, you can use the helper to initialize your observable array.

Pushing to an observable array in a foreach can have the risk of redrawing the DOM many, many times!

Here's an example of a range helper (can be refactored to be more succinct) and an observable array:

function range(from, to) {
  const dir = to > from ? 1 : -1
  return Array.from(
    Array(Math.abs(to - from) + 1),
    (_, i) => from + dir * i
  )
};

const years = ko.observableArray(
  [""].concat(range(new Date().getFullYear(), 1900))
);

ko.applyBindings({ years });

<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.4.2/knockout-min.js"></script>
<ul data-bind="foreach: years">
  <li data-bind="text: $data"></li>
</ul>

edited Jul 4, 2019 at 9:35

answered Jul 4, 2019 at 9:24

user3297291

23.5k4 gold badges33 silver badges49 bronze badges

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

Comments

majidarif · Accepted Answer · 2019-07-04 09:31:16Z

1

You could do it like this:

function BModel(checkInOrEdit) {
  "use strict";
  this.Number = ko.observable("");
  this.Years = ko.observableArray();
  let lyears = [];
  for (let i = 1900; i <= new Date().getFullYear(); i++) { 
    lyears.push(i);
  }
  this.Years(lyears); // see comments
}

This is not the most elegant way but this is how you would do it if you wanted to use a loop.

edited Jul 4, 2019 at 9:31

answered Jul 4, 2019 at 9:17

majidarif

20.4k18 gold badges97 silver badges137 bronze badges

11 Comments

Sachith Wickramaarachchi Over a year ago

Where should I apply this sir

majidarif Over a year ago

that depends. but I updated my answer for a suggestion that is easy to implement.

Sachith Wickramaarachchi Over a year ago

Suppose I need to add years to array scince current year, so I can directly set 2019. how to add years to array since current year to 1999?

majidarif Over a year ago

I didn't understand what you're asking. You want 1999-2019? Then change i = 1900 to i = 1999? Or do you mean the current year as a variable?

majidarif Over a year ago

@user3297291 thank you. Was not familiar with knockout.

|

Collectives™ on Stack Overflow

How to set values to array using foreach

2 Answers 2

Comments

11 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

11 Comments

Your Answer

Sign up or log in

Post as a guest

Related