angular doesn't see all objects inside JSON array

Question

So I have this part of code

$scope.pauseChecked = function(monitorId, groupName) {
  for (var i = 0; i < $scope.monitorResults.length; i++) {
    if (document.getElementById('checkboxId').checked) {
      adminService.pauseMonitor(monitorId, groupName).then(function(response) {
        $scope.getMonitorResultsForSelectedGroups();
        $scope.filterResults();
        var keepGoing = true;
        angular.forEach($scope.monitorResults, function(monitor) {
          if (keepGoing) {
            if (monitor.id == monitorId && groupName == monitor.groupName) {
              monitor.triggerRunning = false;
              keepGoing = false;
            }
          }
        });
      });
    }
  }
};

inside of this row everything works fine

<tr ng-repeat="result in monitorResults" ng-click="setSelected(result.id)" ng-class="{highlighted: result.id === selectedRow, selected: checkboxId}">

this line is outside ng-repeat

<td ng-show="monitorResults.triggerRunning"><button class="btn btn-info" style="width: 150px" ng-click="pauseChecked(monitorResults.id, monitorResults.groupName)">Pause Checked </button></td>

and this how it is look on the page

<table style="float:left; margin-left: auto; margin-right: auto;">
    <tr >
        <td><button class="btn btn-primary" ng-click="runAllMonitorsNew()" style="width: 150px">Run All Monitors</button></td>
        <td ng-show="!checkedGroup"><button class="btn btn-primary" style="width: 150px" ng-click="pauseGrMonitors(result.groupName)">Pause Monitors</button></td>
        <td ng-show="checkedGroup"><button class="btn btn-primary" style="width: 150px" ng-click="resumeGrMonitors(result.groupName)">Resume Monitors</button></td>
     </tr>
        <tr>
        <td><button ng-click="runChecked(result.id,result.groupName)" class="btn btn-info" style="width: 150px">Run Checked</button></td>
        <td ng-show="monitorResults[0].triggerRunning"><button class="btn btn-info" style="width: 150px" ng-click="pauseChecked(monitorResults.id,monitorResults.groupName)">Pause Checked </button></td>
        <td ng-show="!monitorResults[0].triggerRunning"><button class="btn btn-info" style="width: 150px" ng-click="resumeChecked(monitorResults.id,monitorResults.groupName)">Resume Checked</button></td>
    </tr>
</table>
<table style="float: right; margin-right: 50px">
    <tr>
        <td>
            <json-editor-input model="monitorResults" configuration="configuration" on-error="onError(err)"/>
        </td>
    </tr>
</table>
</div>
<BR>
        <img class="center-block" src="ajax-loader.gif" ng-show="loading"/>
<BR>
<table  class="table table-striped table-bordered">
   <tr>
        <td><B>Monitor Id</B></td>
        <td><B>Monitor Name</B></td>
        <td><B>Monitor Type</B></td>
        <td><B>Group Type</B></td>
        <td><B>Warn Threshold</B></td>
        <td><B>Error Threshold</B></td>
        <td><B>Monitor Result</B></td>
        <td><B>Compare Result</B></td>
        <td><B>Last Run Date</B></td>

    </tr>
       <tr ng-repeat="result in monitorResults" ng-click="setSelected(result.id)" ng-class="{highlighted: result.id === selectedRow, selected: checkboxId}">
        <td><input type="checkbox" ng-model="checkboxId" id="checkboxId" name="checkboxId"></td>
        <td>{{result.id}}</td>
        <td>{{result.name}}</td>
        <td>{{result.type}}</td>
        <td>{{result.groupName}}</td>
        <td>{{result.warnThreshold}}</td>
        <td>{{result.errorThreshold}}</td>
        <td>{{result.monitorResult}}</td>
        <td>  <p ng-style="changeColor(result.compareResult)">{{result.compareResult}}</p> </td>
        <td>{{result.lastRunTime}}</td>
        <td>  <button class="btn btn-primary" ng-click="runMonitorNew(result.id,result.groupName)">Run</button> </td>
        <td ng-show="result.triggerRunning"><button class="btn btn-primary"  ng-click="pause(result.id,result.groupName)">Pause</button> </td>
        <td ng-show="!result.triggerRunning"><button class="btn btn-primary" ng-click="resume(result.id,result.groupName)">Resume</button> </td>
    </tr>

this is I see in debugger

What you can see, I have replaced "result" on "monitorResults", because it is gave me to access an array, but thing is when I have checked code thru debugger I found out that monitorId and groupname is undefined. So then I have used monitorResults[0].id and monitorResults[0].groupName but it is gave me access just to the first element in array, how can get an access to each element?

Answer 1

Since you have two tables decoupled, you need to set a model in your scope when you check a result, and that model is the one you should reference in the pause buttons. In fact, all of your monitor, run, and pause methods do not need to pass a variable in the methods, those methods should internally be referencing the scope variable checkboxId. It is the checking of the box that should set a result to true, for the other methods to use.

Make sense?

EDIT

I would also change checkboxId to result.checked and set that true or false. Then the controller methods for the other actions should loop through the result list and look for a result that is checked, and use it.

Pattern

The pattern to use for two decoupled tables like this is to have table 2 at the bottom set properties on the model in the array for the desired actions like "isChecked", "isPaused", or whatever.

Table 1 then has buttons that call controller methods. Those methods loop through the array and check for the status of the toggled properties (isChecked, isPaused, or whatever). Those methods then perform whatever the desired action is by calling another method and passing in the models they found meeting the criteria.

The view tables are agnostic to each other, and all the work of indentifying models happens in the controller. The only thing the view does is update properties on array items.

Answer 2

Explaining your function:

$scope.pauseChecked = function(monitorId, groupName) { //you might be getting monitorId and group name properly
  for (var i = 0; i < $scope.monitorResults.length; i++) { //maybe you are looping to get all selected elements
    if (document.getElementById('checkboxId').checked) { //this will never work properly, because it will only find the first element(due to id which may/maynot be checked), plus why are you trying to do this?
      adminService.pauseMonitor(monitorId, groupName).then(function(response) { 
        $scope.getMonitorResultsForSelectedGroups();
        $scope.filterResults();
        var keepGoing = true;
        angular.forEach($scope.monitorResults, function(monitor) {
          if (keepGoing) {
            if (monitor.id == monitorId && groupName == monitor.groupName) {
              monitor.triggerRunning = false;
              keepGoing = false;
            }
          }
        });
      });
    }
  }
};