Bootstrap & Knockout Bindings

HTML

<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css">
<script src="//netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/knockout/2.3.0/knockout-min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<div class="container">
    <div class="row well">
        <ul class="list-group" data-bind="foreach: topItems">
          <li class="list-group-item" data-bind="text: name">
            <span class="tag tag-default tag-pill float-xs-right" data-bind="text: $parent.count">  
            </span>
          </li>
      </ul>
    </div>
</div>

JavaScript

var topItems = ko.observableArray();
function ViewModel() {
    var self = this;
    self.chosenPerson =  ko.observable({name: ''});
    self.topItems = topItems;
    /*ko.observableArray([
        { name: 'Bert', count:2 },
        { name: 'Charles', count:2 },
        { name: 'Denise', count:2 }
    ]);*/
    
    self.personSelected = function(person){
        self.chosenPerson(person);
        console.log(person.name);
    }
}//End ViewModel

$.getJSON( "https://l4s151mx1c.execute-api.us-east-1.amazonaws.com/beta", function( data ) {
  var items = [];
  console.log(data);
  for (var i = 0; i < data.length; i+=2) {
  	topItems.push({name: data[0], count: data[1]});
  }
});


ko.applyBindings(new ViewModel());