Close to completing the AngularJS filter using an array of strings

Question

Close to completing the AngularJS filter using an array of strings

I'm currently working on developing a customized angular filter that will be based on an array of strings. For instance:

$scope.idArray = ['1195986','1195987','1195988']

The data that I aim to filter is structured as follows:

    $scope.data = {
    "moduleName": null,
    "contentholder_0": {
        "moduleName": "contentholder",
        "id": "-1",
        "name": "",
        "content": ""
    },
    "webapps_1": {
        "moduleName": "webapps",
        "items": [{
            "itemid": "1195986",
            "name": "abc"
        },{
            "itemid": "1195987",
            "name": "def"
        },{
            "itemid": "1195988",
            "name": "ghi"
        }]
    }
}

In my quest to create this custom filter, I referenced a similar query on Stack Overflow: Example

You can find the answer in this JSFiddle link.

Despite my efforts, I have struggled to adapt it to suit my specific data structure - filtering the "items" based on whether their "itemid" matches an entry in "idArray."

Here's a JSfiddle that's as close as I could get without causing Angular to crash.

I apologize if this appears to be a simple question; being a novice, I've made numerous attempts at resolving it without success. I'm uncertain about where the actual filtering occurs and how to compare the strings in idArray with data.webapps_1.items.itemid

Your assistance would be greatly appreciated.

javascript arrays angularjs filter

Answer 1

Answer №1

It seems like this code snippet is designed to filter out items based on specific tags. The filter function in this code checks if any of the items have an ID that matches any of the IDs in the provided array.

.filter('selectedTags', function () {
return function (items, tags) {
    var filtered = [];
    angular.forEach(items, function (item) {
        angular.forEach(tags, function (tag) {
            if (item.itemid == tag) {
                filtered.push(item);
            }
        });
    });
    return filtered;
};
})

To see this code in action, you can check out this Fiddle.

Answer 2

It seems like this code snippet is designed to filter out items based on specific tags. The filter function in this code checks if any of the items have an ID that matches any of the IDs in the provided array.

.filter('selectedTags', function () {
return function (items, tags) {
    var filtered = [];
    angular.forEach(items, function (item) {
        angular.forEach(tags, function (tag) {
            if (item.itemid == tag) {
                filtered.push(item);
            }
        });
    });
    return filtered;
};
})

To see this code in action, you can check out this Fiddle.

Answer 3

Answer №2

When it comes to manipulating JavaScript objects/arrays, I find underscore.js to be quite helpful. One function that stands out is:

_.pluck(data.webapps_1.items, 'itemid');

According to the documentation:

pluck

_.pluck(list, propertyName) A convenient version of what is perhaps the most common use-case for map: extracting a list of property values.
var stooges = [{name: 'moe', age: 40}, {name: 'larry', age: 50}, {name: 'curly', age: 60}];
_.pluck(stooges, 'name');
=> ["moe", "larry", "curly"]

It seems like using this code will help you generate an idArray from your data.

You can then implement a custom filter procedure that incorporates this logic :)

Answer 4

When it comes to manipulating JavaScript objects/arrays, I find underscore.js to be quite helpful. One function that stands out is:

_.pluck(data.webapps_1.items, 'itemid');

According to the documentation:

pluck

_.pluck(list, propertyName) A convenient version of what is perhaps the most common use-case for map: extracting a list of property values.
var stooges = [{name: 'moe', age: 40}, {name: 'larry', age: 50}, {name: 'curly', age: 60}];
_.pluck(stooges, 'name');
=> ["moe", "larry", "curly"]

It seems like using this code will help you generate an idArray from your data.

You can then implement a custom filter procedure that incorporates this logic :)

Close to completing the AngularJS filter using an array of strings

Answer №1

Answer №2

pluck

Similar questions

Efficiently altering values with Python Numpy

What is the best way to see if a variable is present in TypeScript?

Is there a way to change a mandatory field to optional in SuiteCRM?

A step-by-step guide on connecting an event listener to the search input of Mapbox GL Geocoder in a Vue application

Can multiple `npm install` commands run at the same time?

Automatically navigate to the bottom of the page by applying the overflow auto feature

I'm looking for a way to set up a PropType that accepts a boolean value, but also allows for

Using useRef with Typescript/Formik - a practical guide

Drawing unusual shapes using canvas arcs in Coffeescript

Eliminate nested object properties using an attribute in JavaScript

The functionality of getElementsByClassName and appendChild is not producing the desired outcome

The routing feature in AngularJS is functional with the hosting URL, but encounters issues when used

"Encountered issues during compiling: X ERROR found at line 9 in the Header.js file, spanning from characters

Avoid the problem of animations triggering twice when clicking

AngularJS offers a decorator to log messages without the need for a debug method

Node.js threw an error when trying to download a tarball, displaying a status code of

The leave animation for Angular's ngAnimate and ng-view feature appears to be malfunctioning

Prevent deletion of already uploaded images in Blueimp by disabling the delete button

The Arrow notations don't seem to be functioning properly in Internet Explorer

Extract data from nested JSON and populate a list with corresponding values