Question

This should be a simple one: I have an observableArray object called “To” in my viewmodel, which contains EmailAddress elements. Each element has two properties: DisplayName and Address.

I want to print each of the elements in the array to a single input field, semi colon separated. What I am getting now is :

“[object Object],[object Object]”

How do I bind and print the attributes instead? I’ve tried various solutions like adding “value: to.DisplayName” but to no avail.

<!-- illustration only, this is what the items in the TO array look like
     I want to print the value of DisplayName for each element -->
var EmailAddress = function(dName, addr) {
    self = this;
    self.DisplayName = dName;
    self.Address = addr;
};

<!-- viewmodel -->
var EmailModel = function (email) {
            var self = this;
            self.id = ko.observable();
            self.subject = ko.observable();
            self.body = ko.observable();
            self.from = ko.observable();
            self.to = ko.observableArray(); <-- display the DisplayName property of these elements)
            self.cc = ko.isObservable();
            self.bcc = ko.observable();
            };


<!-- print the contents of the TO array --> 
<input data-bind="value: to" type="text" />

Answer 1

Edit: Missed the error first time around, should read the whole questions next time.

There are two methods, in that case. Use a computed obvservable, or inline an arrayMap.

Here it is in a fiddle.