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

时间:2016-06-03 11:24:36

标签: javascript angularjs json filter

我有数组对象的结果,需要在response_id的过滤器中应用。这个密钥存在于响应的孩子身上。如果我使用23764,23765搜索,我想要所有具有至少2个响应的问题对象,ID为23764和23765,这些是我在响应数组中想要的唯一两个响应对象。

如果我只使用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"
        }
    ]
}
]

2 个答案:

答案 0 :(得分:2)

因此,您使用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

答案 1 :(得分:0)

你可以使用angular forEach循环删除object.try。

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>