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?

Why have you replaced result with monitorResults? result.groupName and result.id should have given you the desired results — Nikhil Aggarwal
– Nikhil Aggarwal, Commented Jan 20, 2016 at 14:11
Can you show more of the html view in a block? I'd like to see what you mean by the td element being outside the tr. — Daniel Nalbach
– Daniel Nalbach, Commented Jan 20, 2016 at 14:13
<tr ng-repeat="result in monitorResults" (each item in list. Item here is result and list is monitorResults). So inside and at this DOM element level result is the list item . It will refer to monitorResults[index]. — Kop4lyf
– Kop4lyf, Commented Jan 20, 2016 at 14:15
how many rows are you getting in your table? Just wanted to see if the data is proper. Plus where are you putting in your debugger? Maybe that is outside the scope — Kop4lyf
– Kop4lyf, Commented Jan 20, 2016 at 14:21

Daniel Nalbach · Accepted Answer · 2016-01-20 15:19:57Z

2

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.

edited Jan 20, 2016 at 15:19

answered Jan 20, 2016 at 14:26

Daniel Nalbach

1,26314 silver badges19 bronze badges

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

6 Comments

Anton Over a year ago

so you mean that I have to take out all variables from methods and pass to it only checkboxId?

Daniel Nalbach Over a year ago

The upper table methods have no knowledge of the which result model belongs to which checkbox. The scope, however, does. The controller has access to the scope. All of your methods are in the controller. So when the method runs in the controller, it just needs to check the scope to see which checkbox was checked. The pattern of passing in a variable to the method from inside the view only really works with a nested heirarchy.

Anton Over a year ago

this is exactly that i mean, upper table doesnt know whats going on in bottom table. How can I bind it?. The most interesting thing is that buttons resume monitors and pause monitors work fine, so problem only in checked buttons

Daniel Nalbach Over a year ago

That's the thing, you don't need to bind the two tables in the view. You are doing extra work to try and accomplish that, which is not necessary (even if some of it works). The methods you are calling are in the controller. They already have access to the monitorResults array. All you need is for the bottom table to change properties of individual array items, and when the method for pause, run, etc. loop through the monitorResults array, they just need to look for the modified properties.

Kop4lyf Over a year ago

checkboxes in ng-repeat, always an issue for anglularjs learners :)

|

Kop4lyf · Accepted Answer · 2016-01-20 14:32:42Z

0

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;
            }
          }
        });
      });
    }
  }
};

answered Jan 20, 2016 at 14:32

Kop4lyf

4,6001 gold badge27 silver badges31 bronze badges

9 Comments

Anton Over a year ago

first function gets access to objects inside monitiorResults array, second loop checks how many elements function have got, third function should check if checkboxId is checked do next code

Kop4lyf Over a year ago

pauseChecked is not geting called anywhere inside ng-repeat.

Kop4lyf Over a year ago

check whether the monitorId and groupName are also coming undefined in pause function. As that function looks proper.

Kop4lyf Over a year ago

Let us continue this discussion in chat.

Daniel Nalbach Over a year ago

@Kop4lyf I think that is really all he needs to do, use the result as the model for the checkbox, set a checked property on the it, and in his loops parse for the checked property.

|

Collectives™ on Stack Overflow

angular doesn't see all objects inside JSON array

2 Answers 2

6 Comments

9 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

6 Comments

9 Comments

Your Answer

Sign up or log in

Post as a guest

Related