How to display JSON array using ng-repeat in angularjs?

Question

This should be simple but I'm not able to solve this and have no idea where I am going wrong. I have an angular module that is supposed to repeat the data that is a JSON array; My controller and module looks like the one below

 (function() { var timeslots = data; var app = angular.module('TimeSlot', []); app.controller("TimeSlotController", function(timeslots) { this.timeslots = JSON.parse(timeslots); }); })(); <div ng-app="TimeSlot"> <div class="col-md-12" ng-controller="TimeSlotController as slot" ng-repeat="item in slot.timeslots" > <div class="col-md-4 timeblock"> <h3 class="event-type-name">{{ item.time }} Hour Appointment</h3> <div class="description mts">{{ item.description}}</div> <div class="cost"><i class="fa fa-euro"></i>{{ item.cost }}</div> </div> </div> </div> </div> <!-- jQuery --> <script src="http://code.jquery.com/jquery.js"></script> <!-- Bootstrap JavaScript --> <script src="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js"></script> <script src="http://cdnjs.cloudflare.com/ajax/libs/angular.js/1.3.3/angular.js" type="text/javascript" charset="utf-8"></script> <script type="text/javascript"> var data = {{{ timeslot }}} </script> <script src="/js/timeslot.js"></script> 

This is the data that I am trying to parse,

vardata=[ { "time": 1, "description": "Here lies 1", "cost": "10" }, { "time": 2, "description": "Here lies 2", "cost": "20" }, { "time": 3, "description": "Here lies 3", "cost": "10" } 

]

Any help will be appreciated, I have taken a look at other posts and I have not been able to figure it out, so sorry if it is a duplicate post.

Answer 1

is data global? you can not to inject simple variables to your controller.
Try to delete argument from controller function.
Also why you parse already parsed data?

Just pust your data to $scope:

app.controller("TimeSlotController", function($scope) { $scope.timeslots = timeslots; }); 

And use it inside your controllers view:

<div ng-controller="TimeSlotController"> <div class="col-md-12" ng-repeat="item in timeslots"> {{item}} </div> </div> 

Answer 2

If you repeat the controller, then the variable timeslots is not available on the same line.
Try your HTML like so:

<div class="col-md-12" ng-controller="TimeSlotController as slot" > <div class="col-md-4 timeblock" ng-repeat="item in slot.timeslots"> <h3 class="event-type-name">{{ item.time }} Hour Appointment</h3> <div class="description mts">{{ item.description}}</div> <div class="cost"><i class="fa fa-euro"></i>{{ item.cost }}</div> </div> </div> 

Answer 3

You need to use $scope, with which angular bind data from controller to views and vicevers.

app.controller('TimeSlotController', function ($scope){ $scope.timeslots = JSON.parse(timeslots); }); 

So, in your view you just spell it like this:

 <div ng-repeat="item in timeslots"> 

ps: sqs my english