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

Extracting key-value pairs from a JSON response in AngularJS

How can I display the JSON response in a table on an HTML page? Angularjs Controller: app.controller('tableController', function ($scope,$http) { $scope.customerTable = []; $scope.getTable = function ...

angularjs

Using Vue's V-IF directive to compare dates

On my website, I have an object that contains a field named available_at with the date in the format of 2019-08-08 I have a working HTML table utilizing Vue bindings but I am unsure how to compare the timestamp above using the built-in Date.now() method ...

javascriptvue.js

Silly problem arising from the animate feature in jQuery

Apologies for my poor English. I am facing an issue with the animate function of jQuery in my code snippet. It seems to work fine at line 2, but it doesn't work at line 3. Can someone help me understand why? $('.opac').hover(function(){ ...

javascriptjqueryjquery-animate

Failure to successfully transmit data from Ajax to PHP script

When I click on a button in my HTML page, I am trying to retrieve information from my PHP code, but it is not connecting properly. The front page displayed in index.php is as follows: <!DOCTYPE html> <html> <head> <link rel="styleshe ...

javascriptphpjqueryajax

Exploring the use of the caret symbol (^) for exponentiation

I am embarking on a project to develop an uncomplicated graphing calculator that enables users to input a function of f (such as f(x) = x^2+2x+6). Essentially, the JavaScript code should replace the x in the function with a specific number and then compute ...

javascriptregexmath

Accessing form data within Mongoose schema hooks via JavaScript

I have a form where I've split the content into two separate MongoDB schemas. I want to access variables that are within node.js/express.js directly in mongoose schema hooks, whether through pre or post hooks of the schema. Here are my files: expres ...

javascriptnode.jsexpressmongoose

Issue with Jquery .ajax function returning an object even after it has already moved on to the next line of code

I'm currently working with JQUERY and AJAX, and it seems like the function is somewhat functional but there's a glitch that occurs after the next line of code runs. This issue causes the script to add a null value when trying to insert the object ...

javascriptjqueryajaxasp.net-mvc

Changing a URL parameter based on the element's width is a simple task when

I'm trying to display elements on a page by replacing a string in the URL parameter with the width of each element of a certain class. I'm new to JavaScript, so any help would be appreciated! Here's an example of the HTML for objects on the ...

javascriptjqueryhtmlcss

Leveraging $routeProvider alongside $stateProvider

Initially, I utilized $routeProvider in the following manner and it delivered the desired outcome. angular.module('angularProject', ['angularProject.filters', 'angularProject.services', 'angularProject.directives', ...

angularjsangular-ui-router

Arrange JSON data in ascending order based on the dates, starting with the most recent date, by utilizing jquery

I'm in need of assistance on sorting a list of articles from an external json file based on their creation date. Can anyone provide guidance? Currently, I am fetching the data using AJAX and displaying only 6 results, but I'm facing difficulties ...

javascriptjqueryhtmljsonweb-deployment

Integrating additional JavaScript into an Ionic 2 project

Imagine we have a foo.js file containing a variable, function, and class that are not yet part of the project. Now suppose we want to access these elements in our home.ts method or make them globally available for use within a home.ts method. How can this ...

javascriptangulartypescriptionic2faye

Using Passportjs for user authentication with Angularjs (resource/http get)

I am currently experimenting with integrating Passportjs into an Angular and Express project. My current focus is on testing the Facebook strategy in passportjs. While authentication appears to be successful, I am encountering an issue where it does not n ...

angularjsnode.jspassport.js

Utilizing MongoDb and Node.js for efficient data input

I am currently facing an issue while trying to input data into a mongodb collection using node.js. I believe I have the necessary access to the collection in question. var collection = db.collection("whatsGoingOnEvents"); if(collection){ console.log("hitt ...

javascriptnode.jsmongodb

When the function is called, it will return the global `this

Attempting to bind the user object as 'this' and default time as the first parameter utilizing the function.call method let user = { name:'rifat', txt (time, msg){ console.log('['+time+ '] '+ this.name+ &apo ...

javascriptnode.jsfunction

Load styles in Nuxt asynchronously to improve performance

Is there a way to load styles asynchronously on the website or insert them in the footer? I am currently using Nuxt version 2.0.0 Here's what I have tried so far: Adding a plugin in webpack called async-stylesheet-webpack-plugin. However, this res ...

javascriptvue.jsnuxt.js

I am having trouble getting the Audio Code (a very basic code) to function properly

<audio id="myAudio" src="Avengers.mp3" type="audio/mpeg"></audio> <script> window.onload = function(){ document.getElementById('myAudio').play() } </script> Recently experimenting with some code in NotePad, a friend had ...

javascripthtml

Ways to avoid storing repeating paragraphs in JavaScript Array?

Can someone help me with my code? I am struggling to prevent duplicate data from being saved into an array. When I click on any two paragraph elements, the text inside them gets added to an array named `test`. However, I want to avoid saving the same tex ...

javascript

Are image collections featuring the <img> tag available?

I am working on a website project and I'm looking for a way to create a gallery with a group of photos. The challenge is that I am using Spring MVC, which means regular js and jquery plugins may not work with my 'img src..' tags. Are there a ...

javascriptjqueryhtmlcss

Tips for compiling using a personalized compile directive

Viewing the code on MYPENCODE, I have come across two interesting directives called dragMe and compile: dragMe app.directive('dragMe',['$compile', function ($compile) { return { restrict: 'A', scope:{ ...

angularjsangularjs-directivefullcalendarangularjs-compile

What is the process of transferring an object to a different scope by utilizing checkboxes and Ajax?

I find myself lost in contemplation. I have a checkbox that I want to utilize to move a corresponding object to another area on my page. Furthermore, I am interested in transferring only one specific field of this checked object. In the past, I utilized Aj ...

javascriptjqueryruby-on-railsajaxcheckbox