Utilizing filters in Angular JS to traverse a multidimensional array object with nested response nodes

Question

Utilizing filters in Angular JS to traverse a multidimensional array object with nested response nodes

From an array of objects, I am trying to filter based on the response_id key. This key is nested within the response object. If I input 23764 and 23765, I want to retrieve Question objects that have AT LEAST 2 RESPONSES with those specific ids as the only ones in the array.

If I search with just 23764, I want to get Question objects with a response object containing that id as the only one in the array.

The current implementation I have looks something like this:

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">

Desired Result

[
{
    "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"
        }
    ]
}
]

javascript angularjs json filter

Answer 1

Answer №1

In order to filter with 23764,23765 and retrieve an array of all questions containing one response object with id 23764 AND one response object with id 23765, as the only response objects within the returned results nested response array, there are various ways to create a custom filter function for this purpose.

Below is an illustration of one such approach:

var myCustomFilter = function(dataCollection, selectedValues) {

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

  var filteredResults = [];

  dataCollection.forEach(function(question) {

    var matchingResponses = [];

    question.response.forEach(function(response) {

      if (selectedValues.indexOf(response.response_id) > -1) matchingResponses.push(response);
    });

    if (matchingResponses.length !== selectedValues.length) return;

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

    clonedQuestion.response = matchingResponses;

    filteredResults.push(clonedQuestion);
  });

  return filteredResults;
};

var userSelectedValues = '23764, 23765';

var finalResult = myCustomFilter($scope.data, userSelectedValues);

It might be beneficial to include some checks for arguments and explore optimization strategies, but this should provide a starting point.

You may also need to adjust the logic depending on whether you require duplicates of the original data or references.

Check out a live demo here: http://plnkr.co/edit/r6a5qbw4JJ6Zc5eFopLT?p=preview

Answer 2

In order to filter with 23764,23765 and retrieve an array of all questions containing one response object with id 23764 AND one response object with id 23765, as the only response objects within the returned results nested response array, there are various ways to create a custom filter function for this purpose.

Below is an illustration of one such approach:

var myCustomFilter = function(dataCollection, selectedValues) {

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

  var filteredResults = [];

  dataCollection.forEach(function(question) {

    var matchingResponses = [];

    question.response.forEach(function(response) {

      if (selectedValues.indexOf(response.response_id) > -1) matchingResponses.push(response);
    });

    if (matchingResponses.length !== selectedValues.length) return;

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

    clonedQuestion.response = matchingResponses;

    filteredResults.push(clonedQuestion);
  });

  return filteredResults;
};

var userSelectedValues = '23764, 23765';

var finalResult = myCustomFilter($scope.data, userSelectedValues);

It might be beneficial to include some checks for arguments and explore optimization strategies, but this should provide a starting point.

You may also need to adjust the logic depending on whether you require duplicates of the original data or references.

Check out a live demo here: http://plnkr.co/edit/r6a5qbw4JJ6Zc5eFopLT?p=preview

Answer 3

Answer №2

Here's a solution using the angular forEach loop to remove an object:

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>

Answer 4

Here's a solution using the angular forEach loop to remove an object:

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>

Utilizing filters in Angular JS to traverse a multidimensional array object with nested response nodes

Answer №1

Answer №2

Similar questions

JavaScript parameter not found

What is the best way to choose $(this) within a JavaScript expression inside a template literal?

No matter what I do, I can't seem to stop refreshing the page. I've attempted to prevent default, stop propagation, and even tried using

Formulate an array and filter out items that conclude with a colon

Getting information from MySQL database with just HTML and JavaScript

Is there a way to automatically populate textbox values using a MySQL query response when the dropdown selection is changed?

Localization support is working partially in a Node Express application that uses Handlebars for templating

Strategies for structuring CoreData to manage intricate datasets

Implement a content editable div when clicked

Adding parameters to TR or TDs in DataTables 1.10.5 via Ajax: A step-by-step guide

Achieve a clockwise rotation of an object back to its original position using Three.js

The environmental variable remains undefined even after it has been established

Issue encountered: Object is not functioning properly with Node.js AuthenticationExplanation: A TypeError occurred

Unable to receive a response in React-Native after sending a post request

Utilizing JSON, HTML, and jQuery to create a dynamic cascading dropdown menu

verification pop-up with ngDialog

Ways to determine if content is visible within a div

PHP is encountering a duplication issue with the JSON output

Developing an HTML table dynamically with JavaScript and incorporating CRM data

Enhancing User Experience with AJAX Page Loading and Progress Tracker