【问题标题】:Angular filter string array by object value按对象值的角度过滤器字符串数组
【发布时间】:2016-09-03 20:26:15
【问题描述】:

我有两个数组。 第一个是包含字符串的$scope.termini,另一个是包含对象的$scope.reserved。每个对象都有变量vrijemeTermina。我想用$scope.reserved[x].vrijemeTermina过滤$scope.termini

reserve.controller('resCtrl', function($scope, $http) {
    $scope.$watch("pickedDate", function(){
      $scope.termini=["13:00","15:00","17:00","19:00","21:00"];
        $http.post('php/dropdown.php',{"datum":$scope.pickedDate}).success(function(data){
          $scope.reserved = data;
          //alert(JSON.stringify(data));
          //alert($scope.reserved[0].datumTermina);
          angular.forEach($scope.reserved, function(value, key){
          $scope.termini = $filter('filter')($scope.termini, value.vrijemeTermina, false);
        });
      });
      console.debug("%o", $scope.termini);
      });
  });

我尝试了很多没有用的东西。大多数答案我通过它的属性找到了过滤对象数组。我还没有找到解决这个问题的方法。

<?php
require_once(dirname(dirname(__FILE__))."/php/db-conn.php");

$data = json_decode(file_get_contents("php://input"));

$query = "SELECT * from termin WHERE datumTermina='".$data->datum."'";
$result = mysqli_query($con, $query);
$arr = array();
if(mysqli_num_rows($result) != 0) {
  while($row = mysqli_fetch_assoc($result)) {
    $arr[] = $row;
  }
}

$con->close();

echo json_encode($arr);

?>

那是我的 php 文件。它返回的 json 看起来像 {0:{"id":"1";"vrijemeTermina":"13:00";"datumTermina":"03/09/2016"}} 我猜。

【问题讨论】:

  • 您需要将$filter 服务注入您的控制器,如果您只使用过滤器,那么也许使用filterFilter 服务
  • @papakia 嘿伙计,感谢您的回答,解决了控制台给我的错误之一,但没有解决问题
  • 控制台中出现的其他错误是什么?
  • 你能发布你的 JSON 吗?
  • 我将我的 php 文件添加到问题 @papakia

标签: javascript angularjs json angularjs-filter


【解决方案1】:

试试这个:

$scope.termini = $scope.reserved.filter(function(v){
   return $scope.termini.filter(function(e){
              return e == v.vrijemeTermina
            }).length > 0;
});

这将创建一个数组,其中包含来自$scope.reserved 的所有对象,这些对象的vrijemeTermina 值等于原始$scope.termini 数组中的值之一。

哦,我又读到你的问题了,我想你希望反过来解决这个问题。

$scope.termini = $scope.termini.filter(function(v){
   return $scope.reserved.filter(function(e){ 
              return e.vrijemeTermina == v
            }).length > 0;
});

【讨论】:

  • 嘿伙计,这很接近,我想排除这些结果,所以我只是将它设为 length = 0,这样应该可以吗?
  • 我把它小于 1 并且它工作了,非常感谢,我已经努力让它太久了!
  • @nytez 很高兴能帮上忙。祝你好运。此外,您可以使用..}).length == 0; 而不是&lt; 1,但在这种情况下,这两个条件的作用相同。
【解决方案2】:

使用filter() 的纯 Javascript 解决方案怎么样?

$scope.termini.filter(function(element, index, array) {

    return element == $scope.reserved[index].vrijemeTermina;

});

这就是你要找的吗?它将返回一个数组,其中包含来自$scope.termini 的所有元素,其中$scope.reserved[i].vrijemeTermina 中的相应值按索引匹配。如果这不是你想要完成的,你能说得清楚一点吗?

【讨论】:

    【解决方案3】:

    您可以像这样在 for 循环中访问每个对象的 vrijemeTermina 属性:

    reserve.controller('resCtrl', function($scope, $http, filterFilter) {
    
        $scope.$watch("pickedDate", function() {
    
            $scope.termini = ["13:00","15:00","17:00","19:00","21:00"];
    
            $http.post('php/dropdown.php',{"datum":$scope.pickedDate})
            .then(function(response) {
    
                // make sure your data is parsed
                $scope.reserved = angular.fromJson(response.data);
    
                // check your data is an array
                if (!angular.isArray($scope.reserved)) {
                    console.error("Expected $scope.reserved to be of type Array but is of type " + typeof($scope.reserved));
                    return;
                }
    
                // loop through the array of objects
                for (var i = 0; i < $scope.reserved.length; i++) {
    
                    // each iteration filter $scope.termini by the current objects vrijemeTermina value
                    $scope.termini = filterFilter($scope.termini, $scope.reserved[i].vrijemeTermina, false);
    
                }
    
                console.debug("%o", $scope.termini);
    
            }, function(error) {
    
                // good practice to handle errors
    
            });
    
        });
    
    });
    

    【讨论】:

    • 预期 $scope.reserved 为 Array 类型,但为 object 类型:/
    • 好的,所以您不返回对象列表?尝试将response.data 分配给$scope.reserved,查看我编辑的代码
    猜你喜欢
    • 1970-01-01
    • 1970-01-01
    • 2017-05-20
    • 2016-01-10
    • 2020-03-28
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 2014-12-16
    相关资源
    最近更新 更多