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

i'm trying data database , populate different bootstrap dropdowns.

the table contains 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 data don't know how access different fields of table, tried doesn't work:

self.ipaddresses(array.ipaddress); self.hostnames(array.hostname); self.recordnumbers(array.recordnumber); 

html code of 1 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