Guide on implementing ng-show for a specific array key value presence

Question

Guide on implementing ng-show for a specific array key value presence

Imagine I am working with an array like this:

(this data is fictitious, as I cannot share information from my client)

collections: {
    browsers: [
        {
            label: 'Safari',
            visitors: 45,
            bounces: 20
        },
        {
            label: 'Edge',
            visitors: 25,
            bounces: 12
        },
        {
            label: 'Brave',
            visitors: 40,
            bounces: 18
        },
        {
            label: 'Vivaldi',
            visitors: 6,
            bounces: 3
        },
    ]
}

If I want to display data for Brave in my template, normally I would do something like this at the moment it's available:

<div ng-show="collections.browser.brave">content</div>

However, since it's an array, this method will not work.

Is there a way to use ng-show effectively with the current object?

javascript json angularjs

Answer 1

Answer №1

If you want to achieve a similar result, consider the following approach:

<div ng-repeat="browser in collections.browsers">
  <div ng-show="browser.label == currentBrowser">content</div>
</div>

This HTML code will depend on the values set in your controller:

$scope.collections = //Place your JSON data here
$scope.currentBrowser = 'chrome'; //Choose any browser name as per your requirement

Answer 2

If you want to achieve a similar result, consider the following approach:

<div ng-repeat="browser in collections.browsers">
  <div ng-show="browser.label == currentBrowser">content</div>
</div>

This HTML code will depend on the values set in your controller:

$scope.collections = //Place your JSON data here
$scope.currentBrowser = 'chrome'; //Choose any browser name as per your requirement

Answer 3

Answer №2

Here is a way to achieve this

javascript function

$scope.checkBrowser = function(name) {
    return browserCollection.some(function(browsers) {
        return browsers.type === name;
    });
};

html code

<div ng-show="checkBrowser('Firefox')">website content</div>

:)

Answer 4

Here is a way to achieve this

javascript function

$scope.checkBrowser = function(name) {
    return browserCollection.some(function(browsers) {
        return browsers.type === name;
    });
};

html code

<div ng-show="checkBrowser('Firefox')">website content</div>

:)

Guide on implementing ng-show for a specific array key value presence

Answer №1

Answer №2

Similar questions

Load data into a TextBox based on the option selected in a DropDownList using ASP.NET and Javascript

Variety of colorbox requests based on individual cookie requirements

The issue of the input placeholder not functioning properly has arisen in conjunction with Angular and

Dart: Mastering the Art of Reading JSON Files with Comments

Tips for detecting a false JSON response from the ticker API at the Unocoin Bitcoin exchange

Tips for submitting a form with multiple fields that share the same name attribute using ajax:

Changing the value of a previous TD element using Javascript

Regular expression ignores the initial "less than" character

Counting up in ASP.NET using Javascript

Send the chosen item from the <b-form-select> element to the parent component through props

Dominating React Components with Unique CSS Styles

"Automate the process of manual content duplication with JavaScript's for each replacement

The error message reads: `json.decoder.JSONDecodeError: Unexpected additional data present at line 2, starting from column 1 (character

Accessing fields from other sources in ng-repeat can be accomplished by utilizing special syntax within the ng-repeat directive

The Access-Control-Allow-Origin policy does not permit the origin <origin> to be accessed

Obtain JSON data using the curl command

Using json_encode on an array after applying array_filter yields a unique outcome

Utilize jQuery and AJAX to refresh functions after each AJAX call for newly added items exclusively

After loading the ajax content, remember to include the JavaScript files

Utilizing JSON data within dialogue rather than an activity