Bazinga777 Bazinga777 - 16 days ago 11
AngularJS Question

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

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

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>