How to populate different bootstrap dropdowns using Knockout and jquery - asp.net-mvc

Question

I'm trying to get data from database and populate different bootstrap dropdowns.
The table contains the following fields: id, ipAddress, hostName, recordNumber
The Model:
function myModel(){
var self = this;
self.id = ko.observable();
self.ipAddress = ko.observable();
self.hostName = ko.observable();
self.recordNumber = ko.observable();
}
The 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);
});
});
The array contains well the data but I don't know how to access the different fields of the table, I tried this but it doesn't work:
self.ipAddresses(array.ipAddress);
self.hostNames(array.hostName);
self.recordNumbers(array.recordNumber);
Html code of one dropdown:
<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