Discovering the size of an attribute in an object using Angular

I am working with a JSON object named "programs" that contains an array of key/value pairs. My task is to determine the count of objects within this array that have the key/value pair "status": "Review". In this case, there are 4 objects in total and 2 of them have "status": "Review". The desired output is to return this count, which would be (2).

{
    "id": 3,
    "organizationName": "Watertown School",
      "programs": [
          {
              "id": 72,
              "programId": 456456,
              "programName": "name 1",
              "programType": "Phd",
              "applicationType": "Domestic",
              "concentration": "Medicine",
              "formId": 0,
              "isReviewed": true,
              "status": "Review"
          },
          {
              "id": 73,
              "programId": 4564561,
              "programName": "name 2",
              "programType": "Phd",
              "applicationType": "Domestic",
              "concentration": "Medicine",
              "formId": 0,
              "isReviewed": true,
              "status": "Draft"
          },
          {
              "id": 74,
              "programId": 10343431,
              "programName": "name 3",
              "programType": "Phd",
              "applicationType": "Domestic",
              "concentration": "Medicine",
              "formId": 0,
              "isReviewed": true,
              "status": "Review"
          },
          {
              "id": 75,
              "programId": 10031,
              "programName": "namw 4",
              "programType": "Phd",
              "applicationType": "Domestic",
              "concentration": "Medicine",
              "formId": 0,
              "isReviewed": true,
              "status": "Draft"
          },
      ]
}
javascriptangularjs

Answer №1

If you're wondering where to implement this code, consider placing it in the dom using the following method:

{{ (myObject.programs | filter:{ status: 'Review' }).length }}

Check out this demonstration on jsFiddle for a clearer understanding: http://jsfiddle.net/2jx5oL78/

Answer №2

To effectively filter an array in JavaScript, you can utilize Array.prototype.filter(). This method is not specific to Angular and allows for easy filtering based on specific conditions. Here's an example:

// Let's assume we have an object named obj
var obj = {}; // Object details here
obj.programs = obj.programs.filter(function (value) {
  if (value.hasOwnProperty('status') && value.status === "Review") {
    return true;
  }
  return false;
});

You can then retrieve the length of the filtered array by calling obj.programs.length.

It's worth noting that you can assign the filtered array to any variable as needed. If you just need the count, this approach can be advantageous.

If you're interested in implementing a DOM-based filter using Angular, you could follow Mathew Berg's suggestion or use directives like ngIf or ngShow within a repeater. Alternatively, you can directly apply the specified filter to the repeat element.

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

Gather information from a line of Javascript using Python's scraping capabilities

Is there a way to extract JSON data from a Javascript line using Python? AH4RSearch.listingsJSON = $.parseJSON('{"properties":[{"Price":3695,"PriceFormatted":"3,695","Street":"9251 E Bajada Road&q ...

javascriptpythonjsonweb-scraping

Use jQuery to generate and add several elements to the DOM

Hey there! Currently, I'm working on a real-time chat application using socket io. My goal is to display the user's username and message in a unique way by encapsulating the username in a strong tag. I've made some attempts: $('<div ...

javascripthtmljquery

Express/NodeJS encountering a CORS problem, causing services to be inaccessible in Internet Explorer

Currently, I am working on a REST-based service implemented in Express/NodeJS. The code includes CORS (Cross Origin Resource Sharing) implementation to allow services to be consumed from browsers like Chrome and Firefox. However, there seems to be an issue ...

javascriptnode.jsbackbone.jsexpresscors

What is the best way to refresh a page after rotating the web page?

Struggling with a challenge in Next JS - can't seem to figure out how to automatically refresh the page when it rotates const app () => { useEffect(()=>{ window.addEventListener("orientationchange", function() { window.locati ...

javascriptreactjsnext.js

Causing a click event to occur results in crashing the browser

Take a look at this link: example on jsfiddle Why does the click event keep triggering multiple times when a div is clicked, eventually causing the browser to crash? What could be causing this issue and how can it be resolved? The actual div contains a l ...

javascriptjquery

How does the 'Route' parameter serve in the Restangular methods oneUrl() and allUrl()?

Check out the signature for the oneUrl function: oneUrl(route, url). Here's what the documentation says: oneUrl(route, url): Using this will generate a new Restangular object that points directly to a single element with the specified URL. I fin ...

angularjsrestrestangular

How to stop Accordion from automatically collapsing when clicking on AccordionDetails in Material-UI

I am working on a React web project with two identical menus. To achieve this, I created a component for the menu and rendered it twice in the App component. For the menu design, I opted to use the Material UI Accordion. However, I encountered an issue wh ...

javascriptreactjsmaterial-uiaccordion

Is there a way to automatically cancel any pending $http requests when the route changes in AngularJS?

If we want to cancel the $timeout and $interval when the route changes, we can use '$destroy'. But what about aborting any pending $http requests similar to $interval and $timeout? ...

angularjsangular-routing

Issue with AngularJS UI Bootstrap Datepicker not opening again after clicking away

I've integrated Angular UI bootstrap with my AngularJS project, utilizing version 0.11.0. While implementing various directives from the library, I encountered an issue when trying to incorporate the date picker. There are instances where multiple da ...

jqueryangularjstwitter-bootstrapangular-uiangular-ui-bootstrap

It is not possible to delete a class from an element once it has been added

Issue can be replicated by visiting the following URL: Click on the hamburger icon to open the navigation menu Click on "Services" Click "< Services" within the submenu to attempt to go back For some reason, the removeClass method is not removing the ...

javascriptjquerycss

Utilizing AngularJs for searching strings in a function

I'm currently working on implementing a search function using angularjs. However, I have encountered an issue where the function returns results based on my search query but when I delete the search query, it displays all objects in the set. Here&apos ...

angularjssearch

Properties of a child class are unable to be set from the constructor of the parent class

In my current Next.js project, I am utilizing the following code snippet and experiencing an issue where only n1 is logged: class A { // A: Model constructor(source){ Object.keys(source) .forEach(key => { if(!this[key]){ ...

javascripttypescriptnext.js

What's the reason for the alert not functioning properly?

I am curious about the distinction between declaring a variable using var. To explore this, I tried the following code: <body> <h1>New Web Project Page</h1> <script type="text/javascript"> function test(){ ...

javascript

Troubleshooting: Issue with Vue-Router failing to load component

I have been in the process of developing a website using Vue and Vue-Router locally. Upon completion, I push my changes with git to the production server which updates the site files. Recently, I encountered an issue with a payment status page that is wor ...

javascriptlaravelvue.jsvue-router

Using TypeScript to define values with the placeholder "%s" while inputting an object as a parameter

One common way to decorate strings is by using placeholders: let name = "Bob"; console.log("Hello, %s.", name) // => Outputs: "Hello, Bob." I'm curious if there's a way to access specific values within an object being passed in without specif ...

javascripttypescriptunit-testingjestjsdecorator

What is the maximum number of groupings that can be created from a set of numbers within a

I'm trying to figure out how to handle a specific task, but I'm running into some obstacles. When adding numbers to clusters, a number is considered to belong to a cluster if its distance to at least one existing number in the cluster is within a ...

javascripttypescript

What could be causing the returned promise value to not refresh?

I am currently facing an issue with my program. Upon clicking a button, the goal is to update the "likes" attribute of a MongoDB document that has been randomly fetched. Despite setting up the logic for this, the update does not occur as intended: MongoCli ...

javascriptnode.jsmongodbexpresspromise

To combine arrays A and B within a React useState object, simply pass them as arguments when initializing the state

Currently, I am working on integrating infinite scroll functionality in React, where I need to fetch data from a backend API for loading content on the next page. The challenge I'm facing is that my state is set as an object using useState, and I need ...

javascriptnode.jsreactjsreact-hooksuse-state

The filter on the mobile version is not displaying correctly

When I select a category in the input filter, only items with the same category are displayed when clicked. However, when I click on "Others" on the desktop version, only rows with that category are shown, but on mobile after resizing and filtering, nothin ...

javascripthtmljquerycss

The result of the $.post() request is back

In my current code, I am using a jQuery $.post function like this: $.post('/test', json_data, function(data) { result = data }); This function is being used in a validation process where the return value (data) contains either true or false ...

javascriptjqueryajaxpostreturn-value