ajax call for all elements in for loop

by pj_js15

HTML

<script src="http://knockoutjs.com/downloads/knockout-2.3.0.js"></script>
<div data-bind="foreach: sampleArray">
    <div data-bind="text: id + ' ' + name, attr:{id:'item_'+id}"></div>
</div>
<div>&nbsp;</div>
<a href="#" data-bind="click: queryStatus">Simulate update</a>

JavaScript

function ViewModel(){
    alert(document.URL);
    self = this;
    self.sampleArray = ko.observableArray([
        {id:1, name: "one"},
        {id:2, name: "two"},
        {id:3, name: "three"},
        {id:4, name: "four"}
    ]);    
    self.itemStatus = ko.observableArray([
        {id:1, status: "approved"},
        {id:2, status: "in progress"},
        {id:3, status: "for review"},
        {id:4, status: "approved"}
    ]);        
     
    self.queryStatus = function(){        
        for(i=0; i<self.itemStatus().length; i++){
            //console.log(self.itemStatus()[i].status);
            $('#item_' + self.itemStatus()[i].id).append(' - ' + 
                self.itemStatus()[i].status);
        }//end of for
    };//end of queryStatus
    
}//end of VM

//ko.applyBindings(new ViewModel());

$().ready(function(){    
    var vm = new ViewModel();
    ko.applyBindings(vm);  
    vm.queryStatus();
});