Accessing controller values in view using AngularJS

Question

I am trying to display the values from a JSON nested array in a view using AngularJS.

I have checked the output on a console.log() and the JSON object is returned as expected. But I want to display the details in my view. In particular I want to display them as all the high level values with their associated sub-level values.

Here is my app.js that gets the JSON and iterates over it to get all the high level values and their associated sub-level items.

angular.forEach($scope.data, function(value, key)
{
    // Gets the high level items - WORKING
    console.log("Check Item Description: " + value.checkitemdesc);

    angular.forEach(value.options, function(v, k)
    {
        // Gets the sub-level items - WORKING
        console.log("Check ID: " + v.fleetcheckid);
        console.log("Check Value Description: " + v.checkvaluedesc);
    });
});

I want to then display the high level items in a Onsen UI Switch in List Item Component

<ul class="list">
    <li class="list__item" ng-repeat="val in value">  
    {{val.checkitemdesc}} <!-- NOT WORING HERE -->
        <label class="switch switch--list-item">
            <input type="checkbox" 
                class="switch__input" 
                checked 
                onclick="modal.show('modal')">
            <div class="switch__toggle"></div>
        </label>
    </li>
</ul>

How do I access the array of values returned by the forEach loop? I tried to create an array inside my outer forEach loop and then push each value to it but get error saying value was undefined

$scope.itemDescriptionArray.push(value.checkitemdesc);

Your data is on `scope.data` but in the templates you're trying to access it as though it's on `scope.value`. Change that outer ng-repeat to `"val in data"` and you should be good to go. — Daniel Beck, Apr 27 '16 at 22:47
Perfect, thanks. Just on that, how do I access the inner forEach values then? I tried ng-repeat="checkValueDescriptions in value.options" in a similar list as well but no luck. *grasps at straws* — heyred, Apr 27 '16 at 22:56
If you used `val in data` on the outer loop, then each loop instance will have the variable name "val" -- so use `val.options`. — Daniel Beck, Apr 28 '16 at 01:03

score 2 · Answer 1 · answered Apr 27 '16 at 23:08

Suppose you have this hierarchy:

$scope.items = {
 id1: {
  foo: 'bar'
 }
 id2: {
  foo: 'foo'
 }
}

and you want to iterate it in a template, you'd end up doing something like this:

<ul ng-repeat="(id,item) in items">
   Item {{id}}
   <li ng-repeat="(key,value) in item">
    {{key + '=>' + value}}
   </li>
</ul>

If you want to iterate a non-associative array then you don't need to define tuples on the template.

Accessing controller values in view using AngularJS

1 Answers1