Displaying nested JSON data in AngularJS

Question

I am building a cross platform app using Onsen UI, Monaca and AngularJS.

I have a screen where the user can select from various switches using Onsen UIs built in switches (Switch in List Item). Toggling a switch means that vehicle check needs to be performed, else it is assumed that all checks have passed.

I can display the Check Descriptions (checkitemdesc) as per the JSON below on the list item switches, but when I toggle any of the switches I want to be able to display their related "answers": [{...}] via a modal.

So toggling the "Engine oil level" switch, the user sees a modal with the related checks that can be performed on the "Engine oil level" e.g. Low, top up etc.

JSON example of the data

[{
    "fleetcheckitemid": "1",
    "checkitemdesc": "Engine oil level",
    "answers": [{
        "fleetcheckid": "1",
        "checkvaluedesc": "Ok"
    }, {
        "fleetcheckid": "2",
        "checkvaluedesc": "Low"
    }, {
        "fleetcheckid": "3",
        "checkvaluedesc": "Top-Up Required"
    }]
}, {
    "fleetcheckitemid": "2",
    "checkitemdesc": "Water level",
    "answers": [{
        "fleetcheckid": "1",
        "checkvaluedesc": "Ok"
    }, {
        "fleetcheckid": "2",
        "checkvaluedesc": "Low"
    }, {
        "fleetcheckid": "3",
        "checkvaluedesc": "Top-Up Required"
    }]
}]

My checksController.js used for getting JSON from $http API call which returns a JSON object.

$http.get("http://myfakedomain/api/getfleetchecks.php?fleetid=109").success(function(data) 
{
    $scope.checkItemDescriptions = data;
});

And my checks.html for displaying switches based on "checkitemdesc" in JSON.

<ul class="list">
    <li class="list__item" ng-repeat="checkItemDescription in checkItemDescriptions">
        {{checkItemDescription.checkitemdesc}}
        <label class="switch switch--list-item">
            <input type="checkbox" 
                class="switch__input" 
                checked >
            <div class="switch__toggle"></div>
        </label>
    </li>
</ul>

Selecting any of the switches should fire the modal and populate it with the relevant "answers": [{...}] values

modal

<ons-modal var="modal">
    <div class="alert-dialog-mask"></div>
    <div class="alert-dialog alert-dialog--android">
        <div class="alert-dialog-title alert-dialog-title--android">
            <div style="text-align: center">Further Details</div>
        </div>

        <div class="alert-dialog-content alert-dialog-content--android">
            <div style="text-align: center; padding-top: 10px; padding-bottom: 15px; padding-left: 10px; padding-right: 10px;">
                <p>
                    Please give further details for<br>

                    <!-- Display the selected checkitemdesc here - NOT WORKING -->
                    <strong>{{checkItemDescription[i].checkvaluedesc[i]}}</strong>
                </p>
            </div>

            <!-- Display sub-options for main sections - NOT WORKING-->
            <div style="text-align: left; padding-top: 10px; padding-bottom: 15px; padding-left: 10px; padding-right: 10px;">
                <!-- Display the selected subitems here - NOT WORKING -->
                <label class="checkbox" ng-repeat="checkItemDescription in checkItemDescriptions[i].answers[i].checkvaluedesc">
                    <input type="checkbox">
                    <div class="checkbox__checkmark"></div>
                        <!-- Display the selected subitems here - NOT WORKING -->
                        {{checkItemDescription[i].answers[i].checkvaluedesc}}
                </label>
            </div>
        </div>
    </div>
</ons-modal>

I am able to display the main checks, but how do I do individual checks on each switch and then set the modal values based on that switch?

Answer 1

See this plunker: http://plnkr.co/edit/g952bdedUGuBhC5ez5Im?p=preview

What you do is:

1. Attach a selected: true/false to the checkitem level as well as the answers level.
2. Pass the selected row to the modal controller.
3. Use ng-repeat, using $filter to display the items.

The open modal function:

$scope.openModal = function(items) {

  var selectedItems = [];
  //get only the selected items
  for(var i = 0; i < items.length; i++) {
    if(items[i].selected === true) selectedItems.push(items[i]);
  }

  var modalInstance = $uibModal.open({
      templateUrl: 'modalTemplate.html',
      controller: MyModalCtrl,
      backdrop: 'static',
      keyboard: false,
      resolve: { //pass selected items to the modal controller
        fleetCheckItems: function() {return selectedItems;}
      }
  });
  modalInstance.result.then(function (selectedItem) {
      $scope.selected = selectedItem; //user clicked okay
  }, function () {
      //user click cancel, figure out something to do with the promise
  });
}