过滤器应用于Angular JS中具有响应子节点的多维数组对象

Question

我有数组对象的结果，需要用response_id 申请过滤器。此键存在于响应的子级中。如果我使用 23764、23765 进行搜索，我想要所有具有至少 2 个响应、id 为 23764 和 23765 的 Question 对象，这些是我想要在响应数组中唯一的两个响应对象。

如果我只使用 23764 进行搜索，我想要所有具有该 id 的响应对象的 Question 对象，并且只需要数组中的该响应对象。

我当前的实现尝试做这样的事情：

var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope,$filter) {
    
    $scope.data = [
    {
        "id": "1341",
        "question": "What about this chaneel?",
        "response": [
            {
                "response_id": "23764",
                "comment": "Every thing "
            },
            {
                "response_id": "23765",
                "comment": "No"
            },
            {
                "response_id": "23766",
                "comment": ".."
            }
            
        ]
    },
    {
        "id": "1342",
        "question": "What dislike about this chaneel?",
        "response": [
            {
                "response_id": "23764",
                "comment": "Nothing"
            },
            {
                "response_id": "23765",
                "comment": "No"
            },
            {
                "response_id": "23766",
                "comment": ".."
            }
        ]
    },
    {
        "id": "1343",
        "question": "What suggestion(s) this chaneel?",
        "response": [
            {
                "response_id": "23764",
                "comment": "Nothing "
            },
            {
                "response_id": "23765",
                "comment": "No"
            },
            {
                "response_id": "23766",
                "comment": ".."
            }
        ]
    }
  ];
  
  var res = ($filter('filter')($scope.data, {response:{response_id:'23764,23765'}}, true));
  console.log(res);
  
});

<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<div ng-app="myApp" ng-controller="myCtrl">

期望的结果

[
{
    "id": "1341",
    "question": "What about this chaneel?",
    "response": [
        {
            "response_id": "23764",
            "comment": "Every thing "
        },
        {
            "response_id": "23765",
            "comment": "No"
        }
    ]
},
{
    "id": "1342",
    "question": "What dislike about this chaneel?",
    "response": [
        {
            "response_id": "23764",
            "comment": "Nothing"
        },
        {
            "response_id": "23765",
            "comment": "No"
        }
    ]
},
{
    "id": "1343",
    "question": "What suggestion(s) this chaneel?",
    "response": [
        {
            "response_id": "23764",
            "comment": "Nothing "
        },
        {
            "response_id": "23765",
            "comment": "No"
        }
    ]
}
]

Answer 1

因此，您使用23764,23765 进行过滤，并且您想要一个包含一个响应对象的所有问题数组，其中包含一个 ID 为 23764 的响应对象AND 一个 ID 为 23765 的响应对象，这些应该是仅返回结果嵌套响应数组内的响应对象。

有很多方法可以为此编写自定义过滤器函数。

这是一个例子：

var myFilter = function(collection, values) {

  values = values.replace(' ', '').split(',');

  var result = [];

  collection.forEach(function(question) {

    var questionMatches = [];

    question.response.forEach(function(r) {

      if (values.indexOf(r.response_id) > -1) questionMatches.push(r);
    });

    if (questionMatches.length !== values.length) return;

    var questionCopy = angular.extend({}, question);

    questionCopy.response = questionMatches;

    result.push(questionCopy);
  });

  return result;
};

var filterValues = '23764, 23765';

var result = myFilter($scope.data, filterValues);

您可能想要添加一些参数检查，并且可能会对其进行优化，但至少应该可以帮助您入门。

如果您想要原始数据或引用的副本，可能还需要更改逻辑。

演示： http://plnkr.co/edit/r6a5qbw4JJ6Zc5eFopLT?p=preview

Answer 2

您可以使用角度 forEach 循环来删除对象。试试这个。

var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope,$filter) {
    
    $scope.data = [
    {
        "id": "1341",
        "question": "What about this chaneel?",
        "response": [
            {
                "response_id": "23764",
                "comment": "Every thing "
            },
            {
                "response_id": "237657",
                "comment": "No"
            },
            {
                "response_id": "23766",
                "comment": ".."
            }
            
        ]
    },
    {
        "id": "1342",
        "question": "What dislike about this chaneel?",
        "response": [
            {
                "response_id": "23764",
                "comment": "Nothing"
            },
            {
                "response_id": "23765",
                "comment": "No"
            },
            {
                "response_id": "23766",
                "comment": ".."
            }
        ]
    },
    {
        "id": "1343",
        "question": "What suggestion(s) this chaneel?",
        "response": [
            {
                "response_id": "23764",
                "comment": "Nothing "
            },
            {
                "response_id": "237654",
                "comment": "No"
            },
            {
                "response_id": "23766",
                "comment": ".."
            }
        ]
    }
  ];
   $scope.result = [];
  angular.forEach($scope.data,function(d){
      angular.forEach(d.response,function(res,index){
          if(res.response_id == "23766"){
            d.response.splice(index,1);
             console.log(d.response);
            }
        })
    })
//console.log($scope.data);
});

<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<div ng-app="myApp" ng-controller="myCtrl">
  <pre>{{data| json}}</pre>
  </div>