CODEWITHSUNDEEP
javascripthtmlknockout.js
user3378165
user3378165

Reputation: 6916

How to concatenate all items in an Observable Array using Knockout?

I have the folowing object:

var Transaction = function (data) {
    this.ID = ko.observable(data.transaction.ID);
    this.number = ko.observable(data.transaction.number);
    this.userID = ko.observable(data.transaction.userID);
    this.password = ko.observable(data.transaction.password);

    this.Properties = ko.observableArray(data.Property);
}

The Properties observable array looks like this(in JSON):

[{"address1":"111 Broadway","city":"Brooklyn","state":"NY","zip":null},
{"address1":"222 Broadway","city":"Brooklyn","state":"NY","zip":null}]

In my HTML I have something like this:

<span>PROPERTY</span>
<span data-bind="foreach: Properties">
<span data-bind="text: address1"></span>
<span data-bind="text: city"></span>
span data-bind="text: state"></span>
<span data-bind="text: zip"></span>
</span>

In the browser it looks like:

PROPERTY 
111 Broadway 
Brooklyn 
NY 
222 Broadway
Brooklyn 
NY

And I want it to look like:

111 Broadway, Brooklyn, NY 
222 Broadway, Brooklyn, NY

Any advice?

Upvotes: 1

Views: 312

Answers (2)

webketje
webketje

Reputation: 11006

You could create a computed property in the Transaction prototype as the Properties list view, which would simplify the HTML markup associated with it. 

this.propertyView = ko.pureComputed(function() {
  return this.Properties().map(function(prop) {
    var singleProp = '';
    for (var p in prop)
      if (prop[p])
        singleProp += prop[p] + ', ';
    return singleProp.slice(0,-2);
  });
}, this);

<span>PROPERTIES</span>
<!-- ko foreach: propertyView -->
<p data-bind="text: $data"></p>
<!-- /ko -->

Upvotes: 1

Jeroen
Jeroen

Reputation: 63830

You should wrap those "foreached" properties in a block level element like a p or a div tag, e.g. like this:

var Transaction = function (data) {
    this.ID = ko.observable(data.transaction.ID);
    this.number = ko.observable(data.transaction.number);
    this.userID = ko.observable(data.transaction.userID);
    this.password = ko.observable(data.transaction.password);
    this.Properties = ko.observableArray(data.properties);
};

var vm = new Transaction({ 
  transaction: { ID: 1, number: 2,  userID: 3, password: 'secret' },
  properties: [{"address1":"111 Broadway","city":"Brooklyn","state":"NY","zip":null},
               {"address1":"222 Broadway","city":"Brooklyn","state":"NY","zip":null}]
});

ko.applyBindings(vm);
<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.2.0/knockout-min.js"></script>

<h1>
  <span data-bind="text: ID"></span> -
  <span data-bind="text: number"></span> -
  <span data-bind="text: userID"></span> -
  <span data-bind="text: password"></span>
</h1>
<span>PROPERTIES</span>
<!-- ko foreach: Properties -->
<p>
  <span data-bind="text: address1"></span>
  <span data-bind="text: city"></span>
  <span data-bind="text: state"></span>
  <span data-bind="text: zip"></span>
</p>
<!-- /ko -->

Upvotes: 1

Related Questions