Grouping Alerts in Angularjs

Question

I want to group alerts based on notificationSubject. If > notificationSubject key value length(dosMinus) > 1 means it will > display in first div and notificationSubject key value length (DOS > etc) == 1 means it will display in second div For example, following > json contains notificationSubject = dosMinus are there in 2 times and > remaining each one record. I want to display 'dosMinus' in 1st div and > remaining alerts in 2nd div. ** -->

var myapp = angular.module('myapp', []);
myapp.controller('myctrl', ['$scope', function ($scope) {
    $scope.alerts = {
        "DISPLAY_ALERT_DETAILS": [
            {
                "alertRaisedUserId": 1215
                , "source": 1
                , "clientTimestamp": 1492732800000
                , "severity": "low"
                , "createdByMe": "Y"
                , "notificationSubject": "dosMinus"
                , "notificationDetails": "Lorem Ipsum is simply dummy text of the printing and typesetting industry."
    }

        , {
                "alertRaisedUserId": 1215
                , "source": 1
                , "clientTimestamp": 1492732800000
                , "severity": "low"
                , "createdByMe": "Y"
                , "notificationSubject": "dosMinus"
                , "notificationDetails": "Lorem Ipsum is simply dummy text of the printing and typesetting industry."
    }

        , {
                "alertRaisedUserId": 1215
                , "source": 1
                , "clientTimestamp": 1492992000000
                , "severity": "low"
                , "createdByMe": "Y"
                , "notificationSubject": "DOS"
                , "notificationDetails": "Lorem Ipsum has been the industry's standard dummy text ever since the 1500s"
    }
        , {
                "alertRaisedUserId": 1215
                , "source": 1
                , "clientTimestamp": 1492992000000
                , "severity": "informational"
                , "createdByMe": "Y"
                , "notificationSubject": "EO"
                , "notificationDetails": "Lorem Ipsum is simply dummy text of the printing"
    }
        , {
                "alertRaisedUserId": 1215
                , "source": 1
                , "clientTimestamp": 1492992000000
                , "severity": "informational"
                , "createdByMe": "Y"
                , "notificationSubject": "Late Sales Orders"
                , "notificationDetails": "It has survived not only five centuries"
    }
        , {
                "alertRaisedUserId": 1215
                , "source": 1
                , "clientTimestamp": 1492992000000
                , "severity": "informational"
                , "createdByMe": "Y"
                , "notificationSubject": "Late Purchase Orders"
                , "notificationDetails": "It was popularised in the 1960s with "
    }
        , {
                "alertRaisedUserId": 1215
                , "source": 1
                , "clientTimestamp": 1492992000000
                , "severity": "informational"
                , "createdByMe": "Y"
                , "notificationSubject": "Demand"
                , "notificationDetails": "It was popularised in the 1960s with the release of Letraset sheets containing "
    }
        , {
                "alertRaisedUserId": 1215
                , "source": 1
                , "clientTimestamp": 1492992000000
                , "severity": "informational"
                , "createdByMe": "Y"
                , "notificationSubject": "Spend"
                , "notificationDetails": "more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum."
    }
        , {
                "alertRaisedUserId": 1215
                , "source": 1
                , "clientTimestamp": 1492992000000
                , "severity": "informational"
                , "createdByMe": "Y"
                , "notificationSubject": "Inventory"
                , "notificationDetails": "It was popularised in the 1960s with the release of Letraset "
    }
    ]
    }
}]);

<html ng-app="myapp">

<head> </head>

<body ng-controller="myctrl">
    <div> 1. Div (Display dosMinus)</div>
    <div> 2. Div (Display DOS....Etc)</div>
</body>

</html>

Aniket Sinha · Accepted Answer · 2017-05-06 08:01:50Z

1

Based on your comment:

I want to display 'dosMinus' in 1st div and > remaining alerts in 2nd div.

Here's the simple code using ng-if:

<html ng-app="myapp">
  <head> </head>
  <body ng-controller="myctrl" ng-repeat="a in alerts.DISPLAY_ALERT_DETAILS">
    <div> 1. Div <span ng-if="a.notificationSubject == 'dosMinus'">{{a.notificationSubject}}</span></div>
    <div> 2. Div <span ng-if="a.notificationSubject != 'dosMinus'">{{a.notificationSubject}}</span></div>
  </body>
</html>

EDIT

To select based on no. of occurence of each notificationSubject, you'll have to get count of each and based on that selectively use div1 of div2 using ng-if.

Here the JS code to set and get count:

var count = {};
$scope.alerts = ...//your JSON

for(var i=0;i<$scope.alerts.DISPLAY_ALERT_DETAILS.length;i++) {
    setCount($scope.alerts.DISPLAY_ALERT_DETAILS[i].notificationSubject);
}

function setCount(notSub) {
    if(count[notSub]) {
        count[notSub]++;
    }
    else {
        count[notSub] = 1;
    }
}
$scope.getCount = function(notSub) {
    return count[notSub];
}

and to conditionally use div's, you can call $scope.getCount from HTML to get count.

<body ng-controller="myctrl" ng-repeat="a in alerts.DISPLAY_ALERT_DETAILS">
  <div> 1. Div <span ng-if="getCount(a.notificationSubject)>1">{{a.notificationSubject}}</span></div>
  <div> 2. Div <span ng-if="getCount(a.notificationSubject) == 1">{{a.notificationSubject}}</span></div>
</body>

edited May 6, 2017 at 8:01

answered May 4, 2017 at 19:56

Aniket Sinha

6,0316 gold badges39 silver badges50 bronze badges

Sign up to request clarification or add additional context in comments.

6 Comments

Arun Over a year ago

Notificationsubject length greater than one means it will display in first div and Notificationsubject length equal to 1 then it will display in second div. current json contains dosMinus in two times then your condition is ok.but DOS and EO and Riskscore also will come two or more times. we need to display more than one record display in first div and remaining display in second div.

Aniket Sinha Over a year ago

What do you mean by Notificationsubject length? Length of string value for Notificationsubject e.g 'dosMinus'.length = 8, or number of times dosMinus occurs in JSON, which is 2 in this case, and 1 for everything else?

Arun Over a year ago

Number of times dosminus occurs occurs in Json

Aniket Sinha Over a year ago

In that case, you need to calculate occurence of each notificationSubject. Check the updated code.

Arun Over a year ago

Fantastic Mind blowing Unbelievable ...................................... Thanks Bro

|

Collectives™ on Stack Overflow

Grouping Alerts in Angularjs

1 Answer 1

6 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

6 Comments

Your Answer

Sign up or log in

Post as a guest

Related