Reading Json data using angularjs

Question

well im very new angular and i know this may be a very basic question but ,i've been trying for a long time and ive come to nothing . i just want to create data in json format and then display the results using controllers and angular. heres what ive done so far :

        <body ng-app="guestTracker">
        <script>
            var guestTracker = angular.module('guestTracker',[]);
            guestTracker.controller('dataController',function($scope){
                    $scope.guests=[
                    { date:'1-6-2015', time:'3:00 am', rank:'b'}
                        ];
                        });

        </script>   

        <div  ng-controller="dataController">
        date : {{$scope.date}}

    </div>  

    </body>

the output is just "{{$scope.date}}" just as it is.Thanks in advance and i know its a noob question but it would really help a lot.

Ricconnect · Accepted Answer · 2015-01-16 15:55:16Z

1

you are on the right track, but you do not have to select $scope, because everything in the view is already on the scope. Also you have not selected the guests or a specific member of the guests array. If you want to show the first want the code would be like this:

<body ng-app="guestTracker">
    <script>
        var guestTracker = angular.module('guestTracker',[]);
        guestTracker.controller('dataController',function($scope){
                $scope.guests=[
                { date:'1-6-2015', time:'3:00 am', rank:'b'}
                    ];
                    });

    </script>   

    <div  ng-controller="dataController">
    date : {{guests[0].date}}

</div>  

</body>

answered Jan 16, 2015 at 15:55

Ricconnect

1,0795 silver badges25 bronze badges

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

2 Comments

Vaishak P Dinesh Over a year ago

thank you so much :D and so if guests had more than one element in the array , lets like a set of three dates , times and ranks. we call reference a particular set by changing '[0]' right ? like {{guests[1].date}} etc right ? and coudl we achieve the same by using the directive ng-repeat ?

Ricconnect Over a year ago

Indeed, You could achieve the same with ngrepeat if you want to make a list of every guest

brennan · Accepted Answer · 2015-01-16 15:56:59Z

don't worry, we all have to start somewhere! When I first started using Angular, one trick that helped me was putting {{ 1+2 }} in just to confirm that Angular has been properly initialized (if it has, that will render to 3). So that's always a good place to start. That said, you're calling $scope.date when you need to be calling $scope.guests instead. Assuming you'll have multiple guests, you'll probably want to take advantage of the nifty ng-repeat loop (one of my first favorite Angular features) which will end up looking something like this:

<div  ng-controller="dataController">
        <div ng-repeat='guest in guests'>
            date : {{ guest.date }}
        </div>
    </div>

squiroid · Accepted Answer · 2015-01-16 15:57:13Z

Use this
 <body ng-app="guestTracker">
        <script>
            var guestTracker = angular.module('guestTracker',[]);
            guestTracker.controller('dataController',function($scope){
                    $scope.guests=[
                    { date:'1-6-2015', time:'3:00 am', rank:'b'}
                        ];
                        });

        </script>   

        <div  ng-controller="dataController">
        date : {{guests[0].date}}

    </div>  

    </body>

http://plnkr.co/edit/RCVexXqwcAD3JD3SwSaR?p=preview

Rafał Warzycha · Accepted Answer · 2015-01-16 15:59:16Z

You should can use something like this.

  var guestTracker = angular.module('guestTracker', []);
  guestTracker.controller('dataController', function($scope) {
    $scope.guests = [{
      date: '1-6-2015',
      time: '3:00 am',
      rank: 'b'
    }];
  });

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<body ng-app="guestTracker">
  <div ng-controller="dataController">
    date : {{guests[0].date}}
  </div>
</body>

Collectives™ on Stack Overflow

Reading Json data using angularjs

4 Answers 4

2 Comments

Comments

Comments

Comments

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

2 Comments

Comments

Comments

Comments

Related