Creating an Angular JS controller that utilizes a filter for a JSON array of objects

I have the following JSON data and I'm trying to determine the number of objects with Status: 1 in the JSON. The approach I've taken so far is not working.

I understand that ng-filter should only be applied to Arrays, but I'm struggling to implement it in this JSON structure. Can anyone provide assistance?

I'm receiving an error as expected, but I'm unsure how to resolve this issue in my scenario.

[filter:notarray] Expected array but received:

Plunker Demo

In the JSON data below, you'll see that I have Arrays nested within Arrays, and I need to count the instances where Status has a value of 1.

Expected Output

Count Of 1st Array : 1 Count of 2nd Array : 3 Count of 3rd Array : 1

JSON Data

[
  [{
    "id": 252323,
    "orderId": 223505,
    "status": 1,
    "executedOn": "13/Sep/17",
    "executedBy": "Person A",
    "executedByDisplay": "Person A",
    "cycleId": 3994,
    "cycleName": "Cycle A",
    "versionId": 21291,
    "versionName": "Version A",
    "issueKey": "Key-12561"
  }],
  [{
    "id": 253077,
    "orderId": 224047,
    "status": 1,
    "executedOn": "26/Sep/17",
    "executedBy": "Person B",
    "executedByDisplay": "Person B",
    "cycleId": 4012,
    "cycleName": "Cycle B",
    "versionId": 22912,
    "versionName": "Version B",
    "issueKey": "Key-12580"
  }, {
    "id": 253076,
    "orderId": 224046,
    "status": 2,
    "executedOn": "20/Sep/17",
    "executedBy": "Person B",
    "executedByDisplay": "Person B",
    "cycleId": 4012,
    "cycleName": "Cycle B",
    "versionId": 22912,
    "versionName": "Version B",
    "issueKey": "Key-12578"
  }, {
    "id": 253075,
    "orderId": 224045,
    "status": 1,
    "executedOn": "20/Sep/17",
    "executedBy": "Person B",
    "executedByDisplay": "Person B",
    "cycleId": 4012,
    "cycleName": "Cycle B",
    "versionId": 22912,
    "versionName": "Version B",
    "issueKey": "Key-12582"
  }, {
    "id": 253074,
    "orderId": 224044,
    "status": 1,
    "executedOn": "20/Sep/17",
    "executedBy": "Person B",
    "executedByDisplay": "Person B",
    "cycleId": 4012,
    "cycleName": "Cycle B",
    "versionId": 22912,
    "versionName": "Version B",
    "issueKey": "Key-12584"
  }],
  [{
    "id": 255168,
    "orderId": 226138,
    "status": 1,
    "executedOn": "26/Sep/17",
    "executedBy": "Person A",
    "executedByDisplay": "Person A",
    "cycleId": 4022,
    "cycleName": "Cycle C",
    "versionId": 21291,
    "versionName": "Version A",
    "issueKey": "Key-12617"
  }]
]

Angular JS Code

var app = angular.module('studentApp', []);

app.controller('StudentCntrl', function($scope, $http, $filter) {
  $http.get('data.json').then(function(response) {

    $scope.value = response.data;

    $scope.value.forEach(function(items) {
      $scope.eachValue = items;
      items.forEach(function(insideItems) {
        passvalue = $filter('filter')(insideItems, function(inputs) {
          if (inputs.status == '1')
            console.log(inputs.length);
          return inputs;
        });
      });

    });
  });
});

Answer №1

To achieve this, you can utilize the JavaScript array filter method like so:

 arr.filter( function(a){return a.status==1}).length

Alternatively, you can use Angular to accomplish the same result:

 $filter('filter')(v, function(vc) {return vc.status ==1}).length

If you want to see a working demo, check out this Here is a working demo

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

Generating a jasmine spy on a connected promise

I am currently trying to test a service that utilizes Restangular, but I am facing difficulties in creating the correct spy on chained promises. var services = angular.module('services.dashboards', ['models.dashboards', 'models.me ...

Can the hexadecimal code for a particular color name be identified?

Similar Question: Javascript function to convert color names to hex codes Is there a way to determine the hexadecimal value of a named color that is currently being used by the browser? For example, I would like to achieve something similar ...

Upgrade the jQuery code from version 1.4.2 min to version 1.10.2 min

Hey there, I'm looking for assistance with updating the code below to use jQuery 1.10.2. The backslashes are present because I am using it with PHP and need to escape special characters. I'm not very familiar with JavaScript and unsure of the ch ...

The function putImageData does not have the capability to render images on the canvas

After breaking down the tileset The tiles still refuse to appear on the <canvas>, although I can see that they are stored in the tileData[] array because it outputs ImageData in the console.log(tileData[1]). $(document).ready(function () { var til ...

What strategies can be implemented to effectively utilize both client-side and server-side validation without redundant efforts?

Currently, I am validating user input on the server side using PHP. However, the client side sends XMLHttpRequest calls and highlights invalid fields with red borders. While this method works well, I believe it can be time-consuming for users to wait for a ...

Save updated tags only when the form is submitted in ngTagsInput

Can the sending of a new tag to the server be disabled after adding it to the input and saving it later by clicking a submit button? This is my Controller: vm.tags = []; $scope.loadTags = function (query) { return $http.get('api/tags?query=' ...

Can you explain the meaning of the code snippet provided?

<script type="text/javascript> window.onload = function(){ //execute some code here },function(){ // execute another piece of code here }(); </script> Is this code indicating that multiple function ...

Implementing image caching in tvOS with React-Native: A step-by-step guide

Looking to Implement Image Caching in tvOS using React Native I'm trying to figure out how to cache images that I download from the internet on my Apple TV. I've experimented with various libraries, but none seem to be compatible with tvOS. Any ...

Unable to administer AuthenticationController

I am attempting to inject a controller into my app.run function, but I keep encountering the following error: Uncaught Error: [$injector:unpr] http://errors.angularjs.org/1.2.10/$injector/unpr?p0=AuthenticationControllerProvider%20%3C-%20AuthenticationCon ...

The React application is experiencing difficulty in rendering SVG images exclusively on Windows operating systems

My react app runs smoothly on OSX, but encounters issues on Windows due to SVG files: Module parse failed: Unexpected token (2:0) You may need an appropriate loader to handle this file type. <svg xmlns="http://www.w3.org/2000/svg" viewBox="..."> I ...

Utilizing lodash and JavaScript for data normalization techniques

Converting data from two dimensions to one dimension using lodash rel href link1 url1 link2 url2 link3 url3 url4 link4 url4 url5 Expected output after normalization rel href link1 url1 link2 url2 link3 url3 link ...

Step-by-step guide to rapidly resolve all issues in VS Code using TypeScript

After extensive searching in VS code, I have not been able to find a quick fix all solution in the documentation or plugins. Is this feature actually non-existent, or is it possible that I am overlooking a keybinding? (I am currently utilizing typescript s ...

"Unleashing the Power of Effortless Object Unwr

Looking for a better way to convert a raw json snapshot from Firebase into a JS class. My current method is lengthy and inefficient. Does anyone have a more optimal solution? Class: class SuggestedLocation { country_slug region_slug slug marker_ty ...

What is the most effective way to integrate a Link/URL button into the remirror toolbar?

I have chosen to utilize remirror for constructing a WSYWIG editor. The specific requirement is to include a "Link" icon in the toolbar, allowing users to select text and easily add a hyperlink by clicking on it. Although I came across the LinkExtension ...

Rotate images with animation using Javascript

Seeking assistance with a swinging motion using two simple functions in Javascript. As a newcomer to the language, I am looking for guidance to achieve my goal. First function: function up() { imgObj.style.left = parseInt(imgObj.style.transform = 'r ...

Something strange happening with the HTML received after making a jQuery AJAX request

My PHP form handler script echoes out some HTML, which is called by my AJAX call. Below is the jQuery code for this AJAX call: $(function() { $('#file').bind("change", function() { var formData = new FormData(); //loop to add ...

What are the steps for modifying the JSON data format in AngularJS?

As a newcomer to Angular JS, I am working with the following JSON data: { "CheckList": [ { "UnitClass": "Budget Space", "CheckListCategoryId": 1, "CheckListCategory": "DOORS", "CheckListItemId": 2, "CheckListItem": "Deadbolt, Lockse ...

How to style the first dropdown value in AngularJS to appear bold?

Is there a way to style only the first value in a dropdown list as bold without using jQuery? Here is the code for the dropdown: <div class="col-xs-3"> <select-box id="ad-version-select" options="curItem.stats.version" model="state.version" i ...

Using jQuery to create a seamless scrolling experience to both the top of a page and to

I've been looking for solutions on how to add both jQuery scroll to top and scroll to anchors, but haven't found any integrated options. Is it possible to achieve this here? We currently have a jQuery function in place to add a scroll-to-top fea ...

Error: The term "Image" is unrecognizable

I'm in the process of creating a website where I want to display images via links. If the image is missing or only 1 pixel wide, I need the site to show an alternative image. My technology stack includes Jade/Pug and JS. Before rendering the links on ...