CODEWITHSUNDEEP
javascriptjsonangularjs
Vaishak P Dinesh
Vaishak P Dinesh

Reputation: 49

Reading Json data using angularjs

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.

Upvotes: 1

Views: 140

Answers (4)

Rafał Warzycha
Rafał Warzycha

Reputation: 561

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>

Upvotes: 0

squiroid
squiroid

Reputation: 14037

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

Upvotes: 0

brennan
brennan

Reputation: 131

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>

Upvotes: 0

Ricconnect
Ricconnect

Reputation: 1079

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>

Upvotes: 1

Related Questions