Filtering an object based on keys within an ng-repeat loop

Question

Filtering an object based on keys within an ng-repeat loop

I need help with displaying only the items listed in defaults and excluding the others.

<ul ng-controller="Ctrl" class="dropdown-menu">
    <li ng-repeat="(key, value) in Employee.KeyValue | filter:DefaultKeys(key) ">{{key}}</li>
</ul>

angular.module('app', []);

function Ctrl($scope) {
    $scope.DefaultKeys = function(item) {
        var defaultItems = ["SSS No.", "TIN"];

        return defaultItems.indexOf(item);
    };

    $scope.Employee =
        {
            Code: '123',            
            KeyValue:
            {
                'TIN': '9038468',
                'Facebook' : 'https://fb.com/abc'
            }
        }
}

Here is the fiddle for reference.

Any assistance would be greatly appreciated.

javascript angularjs

Answer 1

Answer №1

Create your own personalized filter.

Custom Filter

angular.module('app', []).filter('MyCustomFilter', function () {
    return function (item) {
        var customKeys = {};
        angular.forEach(['SSS No.', 'TIN'], function (key) {
            if (item[key] !== undefined) {
                customKeys[key] = item[key];
            }
        });
        return customKeys;
    };
});

HTML Implementation

<ul ng-controller="Ctrl" class="dropdown-menu">
    <li ng-repeat="(key,value) in Employee.KeyValue | MyCustomFilter">{{key}}</li>
</ul>

DEMO

Answer 2

Create your own personalized filter.

Custom Filter

angular.module('app', []).filter('MyCustomFilter', function () {
    return function (item) {
        var customKeys = {};
        angular.forEach(['SSS No.', 'TIN'], function (key) {
            if (item[key] !== undefined) {
                customKeys[key] = item[key];
            }
        });
        return customKeys;
    };
});

HTML Implementation

<ul ng-controller="Ctrl" class="dropdown-menu">
    <li ng-repeat="(key,value) in Employee.KeyValue | MyCustomFilter">{{key}}</li>
</ul>

DEMO

Filtering an object based on keys within an ng-repeat loop

Answer №1

Similar questions

What is the best way to create a smooth sliding effect using CSS?

Are you looking for a demonstration of "Creative Loading Effects" that triggers when the page is loaded?

Ways to initiate a flip motion

Issue with initializing MdTable in Vue Material when fetching data

Understanding how to sum the values of two separate dropdown selections using jQuery

Draggable slider not functioning properly with linear interpolation

Utilizing JQuery AJAX to Submit a JSONP Form with File Attachments

Can anyone help me troubleshoot this issue with uploading external JS scripts into my HTML code?

Encountering difficulties displaying navigation interface with react native navigation's stack navigator

Angular 2 does not have the capability to incorporate the Material library

Pass JavaScript variables to a PHP file with the help of AJAX

Unable to render chart using angularjs-nvd3-directives

What is the correct method for executing an API request within a div?

Retrieve and manage information from a database using node.js and express

The dynamic loading of select tag options in Vue.js is not rendering properly

Issue encountered in transmitting information from JSP to servlet

"Troubleshooting a blank page issue in Angular UI Router caused by query string

Issues with javascript functionality in Internet Explorer version 9 and higher

Various ways to utilize Apollo's Query property

Create a new array by dynamically generating a key while comparing two existing arrays