A guide on tallying up the occurrences of a boolean value within a map

The Angular 8 framework is being utilized.

Within an array named teams, the length can be accessed using teams.length. Each entry in the teams array contains a nested map called teamInfo. Within this map, there is a boolean value isClosed that can be accessed by teams.teamInfo.isClosed for each entry. When iterating through this data in ngForloop, the structure is as follows:

*ngFor="let teamID of JSObject.keys(teams); trackBy: trackByFn

<app-team-card
[team]="teams[teamID]"
[isClosed]="teams[teamID].teamInfo.isClosed">
</app-team-card>

The objective here is to determine the total number of maps where isClosed = true. An attempt was made with the following method:

getClosedTeams(teams) {
         let closedTeams = teams.teamInfo.filter((isClosed) => {
             return isClosed.select == true;
        });
        console.log(closedTeams.length);
    }

Answer №1

If you're looking to count the number of closed teams in an array using JavaScript, you can utilize the reduce method as shown below:

const team01 = new Map();
team01.set('name', 'team-01');
team01.set('isClosed', false);

const team02 = new Map();
team02.set('name', 'team-02');
team02.set('isClosed', true);

const team03 = new Map();
team03.set('name', 'team-01');
team03.set('isClosed', true);

const teams = [team01, team02, team03];

function getClosedTeamsCount (teams) {
  return teams.reduce((acc, teamInfo) => {
    return Number(teamInfo.get('isClosed')) + acc;
  }, 0)
}

console.log(getClosedTeamsCount(teams));

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Issue: A request is not pending for flushing during the testing of an AngularJs service

As a beginner in AngularJs, I am currently working on my first unit test. In order to test the service I created, I wrote a test that simply returns a single Json object. However, whenever I run the test, I encounter the error mentioned in the title. I am ...

Using base64 encoding and setting the binary type for Websockets

I'm feeling a bit lost. I've been working on understanding the mechanics of Websockets by setting up a server in node.js and a client-side application. One thing that's really puzzling me is how Websockets handle data transmission. Should da ...

Leveraging JavaScript variables conditionally within a JSON object

Within the code snippet below, there is a condition written as (if (epsflag==0)<?php $a=",hide:'true'";?> ). I am looking to achieve the same condition using JavaScript. Essentially, I want to conditionally utilize a JavaScript variable in ...

In order to enable automatic playback of background images

Having created a slider with hover functionality on icons to change background images, I now seek to add an autoplay feature to the slider. The slider was implemented in a WordPress project using Elementor and involved custom Slider creation through JavaSc ...

Avoid loading Google Maps JavaScript library multiple times to improve website performance

I'm facing an issue with loading Google Maps API script twice in a Bootstrap modal through AJAX. Initially, I have a button that, when clicked, triggers an AJAX call to load an HTML file into the modal. The HTML file contains the Google Maps API scrip ...

Learn how to open a component in a new browser tab using Angular from a different component

I wish to display the MapComponent in a new browser tab when a button in my AppComponent html file is clicked. Currently, when I click the button, the MapComponent opens in a new tab but it also displays the button. How can I configure it so that only the ...

"Auth.currentSession is indicating that there is no user currently logged in

I am currently working on a basic React app with authentication using aws-amplify. My user pool is set up in Cognito and I can successfully redirect the user to the hosted UI for login. However, when trying to retrieve the current session, I am receiving a ...

Could the performance of foreach diminish as the size of the array elements increases?

Right now, my method involves using a foreach loop to search for a key when utilizing array_replace: $grades = array( 0 => array('id' => 1, 'grade' => 4), 1 => array('id' =>5, &apo ...

I keep encountering an issue every time I try to use ng-repeat in my

I am using NG-repeat to display results. The information is retrieved from an array through an API call using $http.post. One of the items in the results is a 'Thumbnail'. A snippet of the result looks like this: "Thumbnail":"http ...

Resolving the CORS predicament caused by the ionic/angular's HTTP interceptor

I am currently using Ionic for both web and mobile development. However, I have encountered a CORS issue when integrating it with an HTTPS URL. Interestingly, the issue seems to be resolved after removing the HTTP interceptor. Nevertheless, I am seeking a ...

Utilize devextreme for uploading files

Currently, I am trying to implement an upload document feature using Dev-Extreme, but I keep encountering an error https://i.sstatic.net/dLxWx.png onFileUpload(event){ this.file = event.target.files[0] } <dxi-column [showInColumnChooser]="fa ...

Troubleshooting Problem with Accordion Size in CSS

I am facing an issue with a dropdown menu that I have created. The dropdown has parent and child rows to display controls, but the width of the Accordion is not stretching as expected despite being set to 100%. Using Chrome and Edge developer tools, I insp ...

Is utilizing Eval on a div within a DataList ItemTemplate feasible for MouseOver event handling?

Apologies for the complicated title. Here is the structure of my DataList: <asp:DataList ID="DataListFloor" runat="server" RepeatColumns="5" > <ItemTemplate> <div style='width:199px;height:166px;background-color: <%# Ev ...

Lost Vuex struggles when it is manually navigating a route in Vue-router

Exclusively on Safari browser, I encounter an issue when manually entering the URL in the navigation bar after logging in. For example, if I type "http://x.x.x.x:8080/gestione", the browser loses the vuex store state (specifically the gest_user module with ...

Leveraging the power of map function in React to generate dynamic components

Here is a code snippet that generates a component: const Test = ({places}) => ( <div> {places.map(place => ( <div className="location" key={place.slug}> <div className="photo" style={ { backgroundImage: "url(" + pl ...

Issue with the height not being updated in a parent React nested Accordion

Currently, I am in the process of developing the mobile version of my homepage. However, there seems to be a bug in my nested accordion labeled "Projects." The bug is causing an issue where the bottom projects section does not display at the correct height ...

Experiencing a scroll problem in the latest version of Google Chrome for Android while using ReactJS? The issue seems to have migrated from the earlier version 99.xxxxxx to

Previously, my website was functioning perfectly in full screen mode. However, after updating Chrome on Android to the latest version (116.xxxxxx....), I noticed that it is now displaying a scrolling behavior that was not present in the earlier version (99 ...

Tips for Decreasing Query Time with MatTable and MatTableDataSource

When working with my firestore database, I am trying to query documents and display them while also calculating the total value of a specific column (promiAmount). I have successfully displayed the values in a mat table, but I'm struggling to calcula ...

Synchronize data bidirectionally between parent and child components in Vue 2

This special wrapper I created for the Vue-multiselect package acts as a child component within this scenario. <template> <div> <multiselect v-model="items" :options="filteredList" ...

Implementing grid items in CSS Grid that do not stretch the grid row and have a container that is scrollable

Here is my dilemma: I am looking to create a grid with a fixed number of columns (that can be adjusted via javascript) and a variable number of rows, all with equal heights. The rows will be determined by the number of grid items, which are represented a ...