CODEWITHSUNDEEP
javascriptjsonangularjs
Bazinga777
Bazinga777

Reputation: 5281

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.

Upvotes: 2

Views: 3026

Answers (3)

Sergio A.
Sergio A.

Reputation: 101

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

Upvotes: 0

SoluableNonagon
SoluableNonagon

Reputation: 11755

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>

Upvotes: 0

vp_arth
vp_arth

Reputation: 14982

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>

Upvotes: 2

Related Questions