在angular js中过滤json或服务器中的数据

Filter the Data from json or Server in angular js

本文关键字:服务器 数据 过滤 angular js json      更新时间:2023-09-26

我有json数据,其中包含以下信息

[
{
"city":"Bangalore",
"dob":"04-Oct-2014",
"age":24,
"maritalStatus":"Single"
},
{
"city":"Bangalore",
"dob":"04-Oct-2014",
"age":24,
"maritalStatus":"Single"
},
{
"city":"Chennai",
"dob":"04-Oct-2014",
"age":24,
"maritalStatus":"Single"
}
]

该数据以列表格式显示

<ul class="userInfo">
<div   ng-repeat="user in users " >
  <li class="btn-default">
    <div class="userDetails">
      <div class="userPosition">{{user.city}}</div>
    </div>
  </li>
  </div>
</ul>

在HTTP请求期间

userDirectory.controller("userListControl", function($scope,$rootScope, $http)
        {
            $http.get('data/userData.json').success (function(data){
               $scope.users = data;
        var usersDb = TAFFY();
        usersDb.insert(data);
            });
    });

这里,数据来自userData.json文件。

我的问题是,

加载页面之前。我会宣布城市="班加罗尔"。

所以基于城市。我必须显示基于城市的数据。我想避免json中除了city:bangalore之外的其他数据。

如何筛选特定的城市数据。我不想使用过滤功能。我必须在这个阶段过滤

$scope.users=数据;因为我在这里使用JS Db。然后只有我可以在这里存储这些数据,并在未来的中进行处理

我不确定你的确切场景,但你可以很好地完成

 $http.get('data/userData.json').success (function(data){
    var city='bangalore';   //can be set anywhere 
    $scope.users = data.filter(function(item){return item.city===city;});
    var usersDb = TAFFY();
    usersDb.insert($scope.users);
 });

Array.filter适用于所有现代浏览器(即9及以上)

否则,实现一个Angular过滤器,并将其用作使用$filter服务的控制器:

是的,您可以将o$filter注入您的控制器中,如下所示:

userDirectory.controller("userListControl", function($scope,$rootScope, $http, $filter)
    {
        $http.get('data/userData.json').success (function(data){
           var cityFilter = {city: 'Bangalore'};
           $scope.users = $filter('filter')(data, cityFilter); //Then here is your result.
           var usersDb = TAFFY();
           usersDb.insert(data);
        });
});

这是angularjs中的$filter文档。