Iterating a knockout observable array in javascript

Question

How Do I iterate an knockout observable array bound to data with knockout js mapping plugin ?. I have created this fiddle to demonstrate my issue. When I try to get the value of the knockout js array object it returns a function instead.

Could anyone please help me out in this matter ?. My Code is as shown below.

//Sample JSON Array
var data =
[{"street":"2532 Falkark Dr", "lat":"39.926295", "lng":"-86.012919",   "zipcode":"92256"},{"street":"8558 Appleby Ln", "lat":"39.922742", "lng":"-86.017637", "zipcode":"92256"}]

function ViewModel() {
var self = this;
self.addresses = ko.observableArray([]); 
ko.mapping.fromJS(data, {}, self.addresses);

}
var viewModel = new ViewModel();

//function binding work order details to view
$(document).ready(function () {
  ko.applyBindings(viewModel);
  gothroughtheObservableArray(viewModel.addresses());
});


function gothroughtheObservableArray(Addressarray)
{
 alert("Got Address Array of length "+Addressarray.length);    

for (var i = 0, len = Addressarray.length; i < len; ++i) {
    var address = Addressarray[i];
    alert(address.street);
}

}

Benjamin Gruenbaum · Accepted Answer · 2013-05-21 02:34:02Z

10

When you use mapping.fromJS it maps properties to observables.

In Knockout when you create an observable in order to gain access to it you invoke its function name.

So when you create

self.addresses = ko.observableArray([]);

In order to access the underlying array and iterate it (just like any other JavaScript array) you should do

var innerArray = self.addresses();

Exactly like you did. However, since each address is mapped to an observable to, you need to do that when accessing the actual properties of addresses.

Try

    alert(address.street());

(fiddle)

answered May 21, 2013 at 2:34

Benjamin Gruenbaum

278k90 gold badges524 silver badges524 bronze badges

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

Comments

Nick Cipollina · Accepted Answer · 2014-07-14 19:52:57Z

3

You also could have just rewritten your function to look like this:

function gothroughtheObservableArray(Addressarray)
{
 alert("Got Address Array of length "+Addressarray().length);    

for (var i = 0, len = Addressarray().length; i < len; ++i) {
    var address = Addressarray()[i];
    alert(address.street());
}

}

This would have worked because as Benjamin answered to gain access to an observable, you invoke it's function.

answered Jul 14, 2014 at 19:52

Nick Cipollina

5613 silver badges13 bronze badges

Collectives™ on Stack Overflow

Iterating a knockout observable array in javascript

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related