CODEWITHSUNDEEP
jsonangularjsnested
Walrus
Walrus

Reputation: 20444

Using nested JSON data in Angular

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>

Upvotes: 0

Views: 106

Answers (1)

Sajeetharan
Sajeetharan

Reputation: 222542

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>

Upvotes: 1

Related Questions