https://stackoverflow.com/questions/47596688/select-option-not-updating-with-ko-observable-array

by jlspake

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.4.2/knockout-min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div id="searchQuery" class="hide">
  <p>
    <input style="width: 80%;" class="searchQueryInput" data-bind='value: query' placeholder="Enter your search e.g. Thai Restaurant" />
    <button data-bind='click: submitSearchQueryRequest'>Go</button>
  </p>
</div>

<div id="searchReport" class="hide">
  <p>
    <select style="width: 80%;" data-bind="options: searchResultItems, optionsCaption: searchReportOptionsCap, value: selectedSearchReport">
    </select>
  </p>
</div>

<br/>
<span data-bind="text: ko.toJSON(searchResultItems)"></span>

JavaScript

//The js portion:
var ViewModel = function() {
  this.selectedPlace = ko.observable();
  this.query = ko.observable("");
  this.searchResultAddress = ko.observable();
  this.searchResultAddresses = ko.observableArray();
  this.searchResultItem = ko.observable();
  this.searchResultItems = ko.observableArray();
  this.searchReportOptionsCap = ko.observable("");
  this.selectedSearchReport = ko.observable();
  self = this;

  this.submitSearchQueryRequest = function() {
    map = new google.maps.Map(myMap, {
      zoom: 12,
      center: {
        lat: latitude,
        lng: longitude
      }
    });

    self.searchReportOptionsCap("Search result for " + self.query());

    var bounds = map.getBounds();
    var placesService = new google.maps.places.PlacesService(map);
    var query = self.query() + " near " + self.selectedPlace();

    placesService.textSearch({
      query: query,
      bounds: bounds
    }, function(results, status) {
      if (status === google.maps.places.PlacesServiceStatus.OK) {
        var nu = results.length;
        for (var i = 0; i < nu; i++) {
          self.searchResultAddress(results[i].formatted_address);
          self.searchResultAddresses().push(self.searchResultAddress());

          self.searchResultItem(results[i].name + ' --- ' + results[i].formatted_address);
          self.searchResultItems().push(self.searchResultItem());
        }
        console.log(self.searchResultItems());
      }
    });
  };

}.bind(this);

ko.applyBindings(new ViewModel());