jedi nerd jedi nerd - 1 year ago 52
HTML Question

Remove Applications if there are no Notifications connected to the Apps using JavaScript

I have a 'Notifications' application that displays different apps (rules, notifications, alerts, etc.) within it that may have notifications/alerts associated with them. If the apps don't have notifications/alerts then just the apps themselves will be displayed. Upon the apps being loaded I want a check to be done to see if there are notifications/alerts associated with the apps. If no notifications/alerts exist then I want the apps to not be displayed or removed. I am not sure what is wrong with my code. I may be missing the solution by a long shot. I will include a pic as well.

So if everything works properly, on the loading of the app, the only application that should be displayed in this pic is just alerts and map, notifications, and rules would not be displayed because they don't have any alerts/notifications to display.

Any help would be appreciated. I believe I need to add some code in

to check and see if there are any and if there isn't then 'delete' the apps.
gets hit first and pulls in apps the user may have. So maybe a check in there to see if any notifications are associated with the app? I thought I was on the right track, but it still isn't working.

Controller (section of code)

function NotificationsCtrl($scope, $state, AuthService, EcosystemService, RealtimeService) {
var vm = this;
vm.ctrlName = 'NotificationsCtrl';

$scope.showAppsMenu = false;

$scope.appList = {};

$scope.dismissNotification = function(notification) {
function (response) {
delete $scope.appList[notification.appId].notifications[];

$scope.dismissAppNotifications = function(app) {
var notifications = app.notifications;
for (var id in notifications) {
function(notificationId) {
return function (response) {
delete app.notifications[notificationId];

$scope.init = function () {
EcosystemService.getUserAppsByEmail(AuthService.authState.username).then(function (response) {
var apps = response.applications;
$scope.appList['alerts'] = {
name: 'Alerts',
notifications: {}
} ;
for(var i = 0; i < apps.length; i++) {
$scope.appList[apps[i].appId] = {
name: apps[i].name,
icon: apps[i].icon,
notifications: {}
}); EcosystemService.getUserApps( tion (response) {
angular.forEach(response.apps, function(app, index) {
if ($ > -1) {
$scope.appIcon = app.icon;

function listenForNotifications() {
RealtimeService.on("notificationsApp", function (data) {
var app = $scope.appList[data.body.appId];
if (app != null) {
if(!data.body.dismissed) {
data.body.unixEpoch = Date.parse(data.body.whenCreated);
app.notifications[] = data.body;
else {
delete app.notifications[];
delete app.appList[data.body.appId];
else {
delete app.appList[data.body.appId];


//********** Application **********

self.saveApplication = function (application) {
return self.genericPost(self.apiUrl + "/application/update", application);

self.getUserAppsByEmail = function (email) {
return self.genericGet(self.apiUrl + "/application/getByUserEmail?email=" + email);

self.getUserApps = function (email) {
var deferred = $q.defer();

if (email == AuthService.authState.username && self.currentUserApps.length > 0) {
deferred.resolve({ apps: self.currentUserApps });
else {
self.getUserAppsByEmail(email).then(function (response) {
deferred.resolve({ apps: response.applications });

HTML (if needed)

<md-content flex="100">
<div ng-repeat="app in appList">
<div layout="row" layout-align="start center" style="background-color: #3F454b; padding: 8px 16px;">
<!--APP ICON-->
<img ng-src="{{app.icon}}" style="width: 36px;" ng-show="app.icon">
<md-icon style="width: 36px; height: 36px; color: #FFFFFF;" md-svg-icon="images/icons/error.svg" ng-hide="app.icon"></md-icon>

<!--APP NAME-->
<p class="m2" style="color: #FFFFFF; margin-left: 16px;">{{}}</p>

<div flex></div>

<md-icon class="rotate-clockwise-45 no-outline" style="color: #FFFFFF; cursor: pointer;" md-svg-icon="images/icons/add_circle.svg" ng-click="dismissAppNotifications(app)"></md-icon>

<div class="alerts" ng-repeat="notification in app.notifications | orderObjectBy: 'unixEpoch' : true" layout="row" layout-align="start center" style="padding: 8px 16px; border-bottom: 1px solid rgba(255, 255, 255, .2);">
<p flex class="m2" style="color: #FFFFFF; margin-left: 16px;">{{notification.message}} - <span class="m3"; style="color: #FFFFFF"; style="opacity: .3;"; am-time-ago="notification.whenCreated"></span></p>

<md-icon style="color: #FFFFFF; cursor: pointer;" class="no-outline" md-svg-icon="images/icons/close.svg" ng-click="dismissNotification(notification)"></md-icon>

Answer Source

This is what finally fixed the issue... Adding this in the HTML

<div ng-repeat="app in appList" ng-show="(app.notifications | AssociativeArrayFilter) > 0">

And adding this in the Controller

angular.module('notifications').filter('AssociativeArrayFilter', function () {
return function (collection) {
  if (!collection) {
    return 0;

  var reCount = 0;
  angular.forEach(collection, function (val, index) {

  return reCount;