Looping through an observableArray using foreach

Question

I have this observable array in my view model.

this.months = ko.observableArray(['Jan', 'Feb', 'Mar',...]);

If I try to display each month, like this -

<!-- ko foreach: { data: months, as: 'month' } -->
<span data-bind="text: month"></span>        
<!-- /ko -->

It throws an error -

Uncaught ReferenceError: Unable to process binding "text: function (){return month }"
Message: month is not defined

If I try this,

<!-- ko foreach: months -->
<span data-bind="text: $data"></span>
<!-- /ko -->

it displays [object object]

What am I doing wrong?

Thanks.

Roy J · Accepted Answer · 2016-03-02 00:34:50Z

2

I don't know what you're doing wrong, but this works fine. Looks like your months isn't what you think it is.

vm = {};

vm.months = ko.observableArray(['Jan', 'Feb', 'Mar']);

ko.applyBindings(vm);

<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.2.0/knockout-min.js"></script>
<!-- ko foreach: {data: months, as: 'month'} -->
<span data-bind="text: month"></span>
<!-- /ko -->

edited Mar 2, 2016 at 0:34

answered Mar 1, 2016 at 19:41

Roy J

44k10 gold badges84 silver badges106 bronze badges

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

2 Comments

user471317 Over a year ago

Not sure what I did wrong. I deleted everything knockout related from the page and added back one by one. And it works now.

Roy J Over a year ago

I hate it when that happens.

Kalyan · Accepted Answer · 2016-03-01 22:10:45Z

0

`<span data-bind="text: month"></span>`

expects you to provide data with property month. but yours is array of string, therefore it will throw error. knockout is looking for month observable in that array.

As Roy suggested, below should work.

<!-- ko foreach: {data: months, as: 'month'} -->
<span data-bind="text: $data"></span>
<!-- /ko -->

Or you can change your observable array to provide observable data with month as property.

months = [{month:'jan'}, {month:'Feb'}, {month:'Mar'},...]);

make sure you provide observable array.

answered Mar 1, 2016 at 22:10

Kalyan

3164 silver badges15 bronze badges

1 Comment

Roy J Over a year ago

The as: 'month' allows you to use month instead of $data. I updated my example to illustrate.

Collectives™ on Stack Overflow

Looping through an observableArray using foreach

2 Answers 2

2 Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related