CODEWITHSUNDEEP
javascriptjqueryknockout.js
lily
lily

Reputation: 395

How to bind dynamic checkbox value to Knockout observableArray on an object?

I've posted my fiddle here, that has comments with it.

How can I convert/map the AllCustomers array into another array of Customer objects??

I need to push the checked checkboxes objects in to self.Customer(), {CustomerType,checked}

Then I would loop through list of Customer object Array and return an array of all checked Customers - self.CheckedCustomers

function Customer(type, checked)
{
  var self = this;
  
  self.CustomerType = ko.observable(type);
  self.IsChecked = ko.observable(checked || false);
}

function VM()
{
  var self = this;
  
  //dynamically populated - this is for testing puposes
  self.AllCustomers = ko.observableArray([
    { 
      code: "001",
      name:'Customer 1'
    },
    { 
      code: "002",
      name:'Customer 2'
    },
    { 
      code: "003",
      name:'Customer 3'
    },
  ]);
  
 self.selectedCustomers = ko.observableArray([]);
 self.Customer = ko.observableArray([]);
  
//How can I convert the AllCustomers array into an array of Customer object??
//I need to push the checked object in to self.Customer(), {CustomerType,checked}

//uncomment below - just for testing looping through Customer objects
/*
self.Customer = ko.observableArray([  
    new Customer("001"),
    new Customer("002")
  ]);
*/
  
 // This array should return all customers that checked the box
self.CheckedCustomers = ko.computed(function()
{
    var selectedCustomers = [];
    ko.utils.arrayForEach(self.Customer(), function (customer) {
        if(customer.IsChecked())
            selectedCustomers.push(customer);
    });
    return selectedCustomers;
});
}
ko.applyBindings(new VM());
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.4.2/knockout-min.js"></script>

<!-- ko foreach: AllCustomers -->
  <input type="checkbox" data-bind="value: $data.code, checked:$parent.selectedCustomers" /> 
   
  <span data-bind="text: $data.name"></span>
  <!-- /ko -->
<br /> 
  <h4>selectedCustomers code</h4> 
  <div data-bind="foreach: selectedCustomers">
    <span data-bind="text: $data"></span>
  </div>
  
  <h4>Checked boxes are??</h4> 
  <div data-bind="foreach: CheckedCustomers">
    <span data-bind="text: CustomerType"></span>
    <span data-bind="text: IsChecked"></span>
    <span>,</span>
  </div> 

<!-- Use this to loop through list of Customer object Array, uncomment below to test-->
<!-- 
  <!-- ko foreach: Customer --
  <input type="checkbox" data-bind="checked: IsChecked" />
   
  <span data-bind="text: CustomerType"></span>
  <!-- /ko --
-->

Upvotes: 0

Views: 214

Answers (1)

Bivo Kasaju
Bivo Kasaju

Reputation: 1243

You're trying to convert object with properties code and name to an object of properties CustomerType and IsChecked. I'm assuming you want code to be mapped to CustomerType when creating new Customer object.

Here's a working jsfiddle for more or less what you wanted.

https://jsfiddle.net/s9yd0e7o/10/

Added the following code:

self.selectedCustomers.subscribe(function() {
  self.Customer.removeAll();
  ko.utils.arrayForEach(self.selectedCustomers(), function(item) {
      self.Customer.push(new Customer(item, true));
  });
});

Upvotes: 1

Related Questions