Comparing json results from ng-repeat against an array

Question

Comparing json results from ng-repeat against an array

Currently, I am working with a JSON result that appears in an ng-repeat and I want to filter it based on separate data objects or arrays:

Controller.js

$scope.jsonResult = [
 {
   "id": "a123"
 },
 {
  "id": "b456"
 }
]

HTML

<span ng-repeat="r in jsonResult">{{r.id}}</span>

I am trying to create another array of information and then use this data to filter the results displayed in my HTML using ng-repeat.

$scope.itemsToFilter = ["b456","foo"]

When an item matches within my itemsToFilter array and my jsonResult scope object, I do not want it to display within the ng-repeat in my HTML. Do I need to create a custom filter for this? Apologies as I am just starting out with Angular.

javascript json angularjs angular-filters

Answer 1

Answer №1

If you want to filter an array based on a blacklist of item ids in Angular, you can create a custom filter for this purpose:

angular.module("yourAppName")
.filter("filterArrayByBlacklist", function() {
    blackList = ["b456","foo"];
    return function(array) {
        return array.filter(function(item) {
            return blackList.indexOf(item.id) === -1; // item id not found in blacklist
        });
    };
});

Then, you can use this filter in your ng-repeat directive to exclude items from the blacklist:

<span ng-repeat="r in jsonResult | filterArrayByBlacklist">{{r.id}}</span>

For a demonstration, you can check out the example provided in this plnkr: http://plnkr.co/edit/VK3jiVBpL0e1G06WmPZq

Answer 2

If you want to filter an array based on a blacklist of item ids in Angular, you can create a custom filter for this purpose:

angular.module("yourAppName")
.filter("filterArrayByBlacklist", function() {
    blackList = ["b456","foo"];
    return function(array) {
        return array.filter(function(item) {
            return blackList.indexOf(item.id) === -1; // item id not found in blacklist
        });
    };
});

Then, you can use this filter in your ng-repeat directive to exclude items from the blacklist:

<span ng-repeat="r in jsonResult | filterArrayByBlacklist">{{r.id}}</span>

For a demonstration, you can check out the example provided in this plnkr: http://plnkr.co/edit/VK3jiVBpL0e1G06WmPZq

Answer 3

Answer №2

If you're looking for a simple way to filter data, consider using a personalized filter function. You can create a basic filter like this:

$scope.customFilter = function (item) {
    return ($scope.itemsToExclude.indexOf(item.id) === -1);
};

Then, you can use the filter in your HTML like so:

<div ng-repeat="item in dataList | filter:customFilter">
    <p>{{item.id}}</p>
</div>

Check out this JSFiddle for a demonstration.

Answer 4

If you're looking for a simple way to filter data, consider using a personalized filter function. You can create a basic filter like this:

$scope.customFilter = function (item) {
    return ($scope.itemsToExclude.indexOf(item.id) === -1);
};

Then, you can use the filter in your HTML like so:

<div ng-repeat="item in dataList | filter:customFilter">
    <p>{{item.id}}</p>
</div>

Check out this JSFiddle for a demonstration.

Comparing json results from ng-repeat against an array

Answer №1

Answer №2

Similar questions

Can one convert to a boolean array in php?

Is there a way to check for invalid string literals within a string?

The json data type seems to be malfunctioning when used in the jQuery ajax function

Angular: Failure in receiving EventEmitter's event with .subscribe method

Tips for effectively creating and appending elements using JavaScript

A guide to incorporating Material-UI ThemeProvider and WithStyles with Typescript

Guide to setting up a horizontal button menu and dropdown submenu beneath the navigation bar using Bootstrap 4

Unsure of the datatype for a particular field in a JSON object? No problem - here's how to

Why are the elements not found by their id when I check them, even though they were created dynamically using an ajax-generated form with php-inserted values through a

Angular8 Chart.js customizes the Y axis tick labels

Using the reduce method in JavaScript or TypeScript to manipulate arrays

What makes React stand out as a server side rendering technology when compared to Angular?

When a new VueJS project is created, it failed to automatically install the necessary basic HTML files and folders

Loading Three.js JSON files in Apache server

Bump the version number and request a message for the commit

Generating a safe POST connection with express.js

I'm encountering an issue with my API Key being undefined, despite having it saved in both an .env file and as a global variable

Storing data from PHP in Local Storage using JavaScript variable

What happens in the React tutorial when the clear fix is commented out and the appearance does not change?

Controller binding is not possible without the directive 'tabset' and its controller