Using AngularJS to hide elements within a nested dictionary structure

Question

Using AngularJS to hide elements within a nested dictionary structure

My dictionary structure is as follows:

var data = {
  a: [1, 2, 3, 4, 5],
  b: [
    [1, 2],
    [3, 4],
    [5, 6]
  ]
};

Currently, I am using ng-hide to hide an element if the value 2 exists in data->a. Here's how it's implemented:

<i ng-hide="(data.a | filter:2).length">2 not found</i>

Now, I want to achieve the same functionality for data->b. I need to hide the message if the value 2 is found in any of the items within data->b.

I came across a solution on How do I only show an element if nested ng-repeat is not empty?, but my requirement is slightly different as I need to display the message only once.

javascript angularjs angularjs-ng-repeat angularjs-filter angularjs-ng-show

Answer 1

Answer №1

To achieve the desired output based on a provided value, you must create a filter that accepts an array.

HTML

<div ng-hide="(data.b | filteronsubarray:2)">2 not found</div>

Filter Code

app.filter('filteronsubarray', function() {
  return function(arr, toFind) {
    var isFound = false;
    angular.forEach(arr, function(val, index) {
      angular.forEach(val, function(v, i) {
        if(v == toFind){
          isFound = true;
        }
      });
    });
    return isFound;
  }
});

You can also view a Fiddle demonstration of this code here.

I hope you find this information useful!

Answer 2

To achieve the desired output based on a provided value, you must create a filter that accepts an array.

HTML

<div ng-hide="(data.b | filteronsubarray:2)">2 not found</div>

Filter Code

app.filter('filteronsubarray', function() {
  return function(arr, toFind) {
    var isFound = false;
    angular.forEach(arr, function(val, index) {
      angular.forEach(val, function(v, i) {
        if(v == toFind){
          isFound = true;
        }
      });
    });
    return isFound;
  }
});

You can also view a Fiddle demonstration of this code here.

I hope you find this information useful!

Answer 3

Answer №2

If you simply need to perform the same operation you did for data.a, but on each item in data.b, then all you have to do is loop through data.b and implement the identical logic:

<i ng-repeat="b in data.b"
   ng-hide="(b | filter:2).length">2 not found</i>

Check out the Plunker

Answer 4

If you simply need to perform the same operation you did for data.a, but on each item in data.b, then all you have to do is loop through data.b and implement the identical logic:

<i ng-repeat="b in data.b"
   ng-hide="(b | filter:2).length">2 not found</i>

Check out the Plunker

Using AngularJS to hide elements within a nested dictionary structure

Answer №1

Answer №2

Similar questions

Using Javascript to extract elements from JSON objects

Shifting attention from the main point to the surrounding details (including siblings)

Using SCSS to apply a class in Next.js

The variable in Vue.js is failing to update, resulting in a "variable is not defined" error

Angular dependency injection function

The value of a variable undergoes a transformation following its insertion into an

What is the best way to create an array within an object in JavaScript?

Vue js: Automatically assign alternate text to images that are not found

Adjust the speed of the remaining divs below to move up when one is deleted using Ajax and jQuery

What is the process to manually trigger hot reload in Flutter?

Leveraging Jquery and an API - restricted

Implement an event listener on the reference obtained from the React context

React component closes onBlur event when clicked inside

Why does my Visual Studio Code always display "building" when I launch an extension?

Leveraging the power of angular's $asyncValidators by implementing a cache

What is the best way to redirect a URL to include www using Node.js?

Selenium - Tips for entering text in a dynamically generated text field using Javascript!

Tips on displaying each element of an array in a unique format within a React component

How can I maintain the consistent speed of the Javascript timer even when the .deck is clicked?

What is the correct way to incorporate scrollIntoView() using jQuery?