Using nested JSON data in Angular

Question

Very new to angular and just experimenting.

I am trying to use nested JSON data. Below is an example. The values are not outputted in the html yet they were before I created it a JSON object. What am I missing?

var app = angular.module('ops', []);

app.controller('access', function($scope) {

    $scope.links = [
    {
      logon: 'Logon',
      setup: 'Create account'
    }
  ];
});


<body ng-app="access">
    <section ng-controller="access">

        <div class="flex align-c justify-c links txt body lgt spac1" data-trans="ade">
            <a href="">{{links.logon}}</a>
            <a href="">{{links.setup}}</a>
       </div>

</section>
</body>

Did the answer solve your issue

Sajeetharan
– Sajeetharan

2019-03-25 13:26:07 +00:00
Commented Mar 25, 2019 at 13:26 — Sajeetharan
– Sajeetharan, Commented Mar 25, 2019 at 13:26

georgeawg · Accepted Answer · 2019-03-25 18:46:13Z

If you want to access the first object access it using the index,

 <div class="flex align-c justify-c links txt body lgt spac1" data-trans="ade">
            <a href="">{{links[0].logon}}</a>
            <a href="">{{links[0].setup}}</a>
 </div>

if you have more than 1 element , use ng-repeat.

var app = angular.module('ops', [])

app.controller('access', function($scope) {
    $scope.links = [
    {
      logon: 'Logon',
      setup: 'Create account'
    }
  ];
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.7.5/angular.min.js"></script>
<body ng-app="ops">
    <section ng-controller="access">
        <div class="flex align-c justify-c links txt body lgt spac1"
             ng-repeat="data in links" data-trans="ade">
            <a href="">{{data.logon}}</a>
            <a href="">{{data.setup}}</a>
       </div>

</section>
</body>

Perfect. In this example, what is the correct usage of ng-repeat. Would it be ng-repeat="links" on the div. Thanks

Collectives™ on Stack Overflow

Using nested JSON data in Angular

1 Answer 1

2 Comments

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Related