Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Iterating a knockout observable array in javascript

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);
}

}
like image 813
msrameshp Avatar asked May 21 '13 02:05

msrameshp


People also ask

What is observable array in knockout JS?

If you want to detect and respond to changes of a collection of things, use an observableArray . This is useful in many scenarios where you're displaying or editing multiple values and need repeated sections of UI to appear and disappear as items are added and removed.

How do I set observable value in knockout?

To create an observable, assign the ko. observable function to the variable. A default value can be specified in the constructor of the call. Knockout then converts your variable into a function and tracks when the value changes, in order to notify the UI elements associated with the variable.

What is applyBindings in knockout?

applyBindings do, The first parameter says what view model object you want to use with the declarative bindings it activates. Optionally, you can pass a second parameter to define which part of the document you want to search for data-bind attributes. For example, ko.


2 Answers

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.

like image 33
Nick Cipollina Avatar answered Feb 16 '23 00:02

Nick Cipollina


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)

like image 56
Benjamin Gruenbaum Avatar answered Feb 16 '23 00:02

Benjamin Gruenbaum