如何使用Knockout和jquery填充不同的引导程序下拉列表

Question

我试图从数据库中获取数据并填充不同的bootstrap下拉列表。

该表包含以下字段：id，ipAddress，hostName，recordNumber

模特：

function myModel(){
  var self = this;
  self.id = ko.observable();
  self.ipAddress = ko.observable();
  self.hostName = ko.observable();
  self.recordNumber = ko.observable();
}

ViewModel

function myViewModel(){
  var self = this;
  self.ipAddresses = ko.observableArray();
  self.hostNames = ko.observableArray();
  self.recordNumbers = ko.observableArray();
  self.selectedIpAddress = ko.observable("");
  self.selectIpAddress = function (){
      self.selectedIpAddress ();
  }

}

var uri = 'api/items';
var array = [];
$.getJSON(uri)
    .done(function (data) {
        $.each(data, function (index, item) {
            array.push(item);
            self.ipAddresses(array.ipAddress);
            self.hostNames(array.hostName);
            self.recordNumbers(array.recordNumber);
        });
    });

数组包含了很好的数据，但我不知道如何访问表格的不同字段，我试过这个但是它不起作用：

self.ipAddresses(array.ipAddress);
self.hostNames(array.hostName);
self.recordNumbers(array.recordNumber);

一个下拉列表的Html代码：

<div class="input-group">
    <input type="text" class="form-control"data-bind="value:selectedIpAddress"
        <div class="input-group-btn">
            <button type="button" id="dropDownIpAddress" class="btn btn-default dropdown-toggle" data-toggle="dropdown">
                <span class="caret"></span>
                    </button>
               <ul class="dropdown-menu dropdown-menu-right" role="menu" data-bind="foreach: ipAddresses">
                      <li><a role="menuitem" href="#" data-bind="text: ipAddress, click: myViewModel.selectIpAddress"></a></li>
               </ul>
      </div>
</div>

JSFiddle