2016-11-02 11 views
2

検索フィルタにUIブートストラップの先読みを使用しています。コントローラからのデータを使用していますが、$ httpを使用してJSONからデータを取得します。しかし、私はフィルタ機能で$ http要求からデータを取ることができません。HTTPリクエストを使用してフィルタ機能を使用する

現在のコード

// Search Control 
vm.searchCtrl = ""; 
var searchitems = [{ 
     "name": "Adventure", 
     "category": "Activities" 
    }, { 
     "name": "Cycling", 
     "category": "Activities" 
    }, { 
     "name": "Local guided tours", 
     "category": "Activities" 
    }, { 
     "name": "Delux room", 
     "category": "Accommodations" 
    }, { 
     "name": "Super Delux room", 
     "category": "Accommodations" 
    }, { 
     "name": "Goa", 
     "category": "Destinations" 
    }, { 
     "name": "Bengaluru", 
     "category": "Destinations" 
    }]; 

    vm.getSearchitems = function (search) { 
     var filtered = filterFilter(searchitems, search); 
     var results = _(filtered).groupBy('category').map(function (g) { 
      g[0].firstInCategory = true; 
      return g; 
     }).flatten().value(); 

     return results; 
    } 

しかし、今、私はこの

$http.get('../assets/data/search.json').then(function (response) { 
    return vm.searchitems = response; 
}); 
vm.getSearchitems = function (search) { 
    var filtered = filterFilter(searchitems, search); 
    var results = _(filtered).groupBy('category').map(function (g) { 
     g[0].firstInCategory = true; 
     return g; 
    }).flatten().value(); 

    return results; 
} 

ようにしたいが、 "searchitemsが" 取得されていません。

+0

これは非同期呼び出しであるため、関数の実行時にデータを返さないことがあります。ウェブサイトの最初のヒット時にコントローラに挿入するか、キャッシュ/サービスオブジェクトに保存します。 –

+0

これらの非同期の問題は常にAngularで表示されます。 $ httpがデータを返すと、関数を呼び出す方法を示す以下の私の答えを見てください。 – Toddsden

答えて

0

$ httpのデータを取得した後でなければ、関数を呼び出せません。 getSearchItemsへの呼び出しを$ httpから呼び出すように移動します。

$http.get('../assets/data/search.json').then(function (response) { 
    return vm.getSearchitems(response); 
}); 
vm.getSearchitems = function (search) { 
    var filtered = filterFilter(searchitems, search); 
    var results = _(filtered).groupBy('category').map(function (g) { 
    g[0].firstInCategory = true; 
    return g; 
    }).flatten().value(); 
    return results; 
} 
関連する問題