json to observable array

by Leonardo Trimarchi

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.4.0/knockout-debug.js"></script>
<ul data-bind="foreach: recipients">
  <li>
    <input type="radio" name="group" data-bind="value: NumberName, checked: $root.currentAnswer" /> <span data-bind="text: NumberName"></span>
  </li>
</ul>
Is the Current
<label data-bind="text: currentAnswer"></label>

<table>
  <tbody data-bind="foreach: items">
    <tr>
      <td data-bind="text: name"></td>
    </tr>
  </tbody>
</table>

JavaScript

function SelectedReceipientsViewModel() {
  var self = this;



  self.recipients = ko.observableArray([{
    itemName: 'Cats', NumberName: 'Four'
  }, {
    itemName: 'Dogs', NumberName: 'Five'
  }, {
    itemName: 'Zebras', NumberName: 'Six'
  }, {
    itemName: 'Goats', NumberName: 'Seven'
  }, {
    itemName: 'Monkeys', NumberName: 'Eight'
  }, {
    itemName: 'Elephants', NumberName: 'Nine'
  }, {
    itemName: 'Racoons', NumberName: 'Ten'
  }, {
    itemName: 'Moose', NumberName: 'Eleven'
  }, {
    itemName: 'Otters', NumberName: 'Twelve'
  }]);


  self.currentAnswer = ko.observable();


  self.items = ko.observableArray();


  self.currentAnswer.subscribe(function(newValue) {
      if (newValue == 'Cats') {
        // $.getJSON('GetEmployeeInfo', function (data) {
        //var result = $.parseJSON(data);
        //using Get JSON in my App 
        var data = [{
          name: "one"
        }, {
          name: "two"
        }, {
          name: "three"
        }];
        self.items(data);


     // });

  } else if (newValue == 'Dogs') {
    //$.getJSON('GetAllAgents', function (data) {
    //var result = $.parseJSON(data);
    var data2 = [{
      name: "four"
    }, {
      name: "five"
    }, {
      name: "six"
    }];
    self.items(data2);
  }
//}
// });
});
}
ko.applyBindings(new SelectedReceipientsViewModel());