knockout.jsで文字列をフィルターする機能

Question

kockout.jsを使って、リストの文字列ををフィルターする機能の簡易なサイトを作っています。
例文サンプルを参考に var locationsにjson objectを指定して、そこのデータをknockoutを使って、フィルター機能を作成したいです。

発生している問題・エラーメッセージ

現在発生しているエラーは以下です。

i.toLowerCase is not function

該当のソースコード

var locations = [
  {name: 'Auckland', location: {lat: 40.7713024, lng: -73.9632393}},
  {name: 'Raglan', location: {lat: 40.7444883, lng: -73.9949465}},
  {name: 'Napier', location: {lat: 40.7347062, lng: -73.9895759}},
  {name: 'Ahipara', location: {lat: 40.7281777, lng: -73.984377}},
  {name: 'New Plymouth', location: {lat: 40.7195264, lng: -74.0089934}},
  {name: 'Wellington', location: {lat: 40.7180628, lng: -73.9961237}}
];


var Location = function(data) {
  this.name = data.name
}

var ViewModel = function() {
  var self = this;
  this.myLocations = ko.observableArray([]);
  locations.forEach(function(locationItem){
    self.myLocations.push( new Location(locationItem) );
  });
  this.filter = ko.observable("");
  this.filterdLocations = ko.computed(function() {
    var filter = self.filter().toLowerCase();
    if (!filter) {
      return self.myLocations();
    }
    return self.myLocations().filter(function(i) {
      return i.toLowerCase().indexOf(filter) > -1; });

  });
}

ko.applyBindings(new ViewModel());

Search: <input data-bind="textInput: filter" />
<table>
  <tbody data-bind="foreach: filterdLocations">
    <tr><td data-bind="text: name"></td></tr>
  </tbody>
</table>
<script src="js/Lib/knockout-3.4.2.js"></script>
<script src="js/app.js" type="text/javascript"></script>

試したこと

iのプロパティーにJsonObject Locationsのnameを指定する

return i.name.toLowerCase().indexOf(filter) > -1;

試した後のエラー

Uncaught ReferenceError: filter is not defined

補足情報（FW/ツールのバージョンなど）

これをお手本に作成しています。
https://codepen.io/caitlinrouille/pen/qqaQEW

Comments

[m.ts10806]

質問編集画面タイトル横にある「初心者アイコン」をご活用ください。「初心者」と質問で書くよりも伝わりますし、質問一覧に表示されるのでわかりやすくなります。

[spookybird]

スコープの話ではないと思います。self.myLocations().filterに渡したコールバック関数の引数"i"に何が渡ってきているか確認してみましたか？本当に"i"はtoLowerCase()関数を持っていますか？

[keshibat]

iのプロパティーにJsonObject Locationsのnameを指定したら、オッケーでした。

Answer 1

 var ViewModel = function() {
  var self = this;
  this.myLocations = ko.observableArray([]);
  locations.forEach(function(locationItem){
    self.myLocations.push( new Location(locationItem) );
  });
  this.filter = ko.observable("");
  this.filterdLocations = ko.computed(function() {
    var filter = self.filter().toLowerCase();
    if (!filter) {
      return self.myLocations();
    }
    return self.myLocations().filter(function(i) {
      return i.name.toLowerCase().indexOf(filter) > -1; });
  });
};