Iterating list from Angular controller setting scope

Question

I am making a call to my backend, which returns a list of objects as JSON. Now, I want to iterate these in the frontend in my Angular app.

However, when the HTML i wrote below is rendered, nothing is shown. I have no idea why, as I was sure this was the syntax.

There are no JavaScript errors in the console. Also, I was unsure if it was the $scope inside an async call that caused my problem, but it seems that if I copy the response from the API out and puts it as a string (therefore sync and not async), nothing is shown still.

Any idea where my bug is? (Disclaimer: as I am new to Angular, I might have made a newbie mistake!)

My angular app:

var app = angular.module("app", ['ngRoute'])

app.config(function($routeProvider) {   
    $routeProvider.when('/front', { 
        templateUrl: '/templates/front.html',
        controller: 'FrontController'
    });

    $routeProvider.otherwise({redirectTo: '/front'})

});

app.controller('FrontController',['$scope',function($scope) {

    $.ajax({
        type: 'GET',
        url: '/api/serials',
        dataType: 'json',
        success: function(data){
            $scope.serials = data;
        },
        error: function(err) {
            alert('fejl');
        }
    });

    $scope.datatitle = 'hheeh';
}]);

The AJAX call:

In my network category, I can see the following are returned from the API:

[{"_id":"53cf8b80a20055c6eebf80b1","serial":"1231323123","game":"World of Warcraft","date":"2013-12-31T23:00:00.000Z"}]

My HTML:

The HTML rendered in the frontend is: "Angular works: 8"

My code is:

Angular works: {{ 4+4 }}

{{serial.length}}
<ul>
    <li data-ng-repeat="serial in serials">{{serial}}</li>
</ul>

EDIT:

Console log of data:

enter image description here

are you getting desired data in $scope.serials?

micronyks
– micronyks

2014-07-23 17:19:03 +00:00
Commented Jul 23, 2014 at 17:19 — micronyks
– micronyks, Commented Jul 23, 2014 at 17:19
if i say console.log(data), I get the correct data yes.

Lars Holdgaard
– Lars Holdgaard

2014-07-23 17:21:27 +00:00
Commented Jul 23, 2014 at 17:21 — Lars Holdgaard
– Lars Holdgaard, Commented Jul 23, 2014 at 17:21

V31 · Accepted Answer · 2014-07-23 17:40:21Z

3

You can create a factory and inject that in the controller. Here is how you can create a factory and use it in your case:

app.factory('SerialService', function($http) {
    return {
        getSerials: function(callback) {
            return $http({
                method: 'GET',
                url: "/api/serials"
            }).
            success(function(data) {
                callback(data);
            });
    };

});

and in your controller:

app.controller('FrontController',['$scope','SerialService',function($scope,SerialService) {

    SerialService.getSerials(function(data){
       $scope.serials = data;
    });

    $scope.datatitle = 'hheeh';
}]);

Comments

Cory Silva · Accepted Answer · 2014-07-23 17:17:02Z

2

It is because you are using jQuery's $.ajax and Angular is not notified. You could use $scope.$apply() but that would be hackish. Instead inject the $http service. It will make you life easier.

Better yet move all that logic to a factory or a service. It will help you be more DRY.

answered Jul 23, 2014 at 17:17

Cory Silva

2,81119 silver badges23 bronze badges

Comments

micronyks · Accepted Answer · 2014-07-23 17:38:21Z

0

assuming you are getting appropriate json object (as shown) in $scope.serials... you should write as below.

<ul>
    <li data-ng-repeat="serial in serials">{{serial.serial}}{{serial.game}}{{serial.date}}</li>
</ul>

edited Jul 23, 2014 at 17:38

answered Jul 23, 2014 at 17:21

micronyks

55.6k17 gold badges122 silver badges166 bronze badges

5 Comments

Lars Holdgaard Over a year ago

I just modified my HTML to yours, and I made a console.log on the data which gives a correct object. Still, it shows nothing.. Hmm :)

Lars Holdgaard Over a year ago

just updated post with a pic :-) thanks for helping!

micronyks Over a year ago

tell me is there anything in console.log($scope.serials)??? If yes tell me/show me how it comes. if not, use $scope.$apply() in below line.

Lars Holdgaard Over a year ago

Ah, sorry, misunderstood. If I say console.log($scope.serials), after I set it - it has the exact same value as shown in the picture.

Lars Holdgaard Over a year ago

If I say $scope.$apply(); below my line, it works :)

glandrum101 · Accepted Answer · 2014-07-23 17:46:39Z

0

You have two issues here.

The below HTML will print out the JSON representation of the full string. To get an actual property value you have to do serial.xxxx.

<li data-ng-repeat="serial in serials">{{serial}}</li>

The second issue is that you are using $.ajax, which is a jQuery function and anything in the scope of that function will not automatically update the $scope in your controller. You need to use the $http service: https://docs.angularjs.org/api/ng/service/$http

Make sure to properly include the service. If you use the $http service you will not have to manually do the $scope.$apply() and you will remove another jQuery dependency.

answered Jul 23, 2014 at 17:46

glandrum101

4661 gold badge3 silver badges11 bronze badges

Collectives™ on Stack Overflow

Iterating list from Angular controller setting scope

4 Answers 4

Comments

Comments

5 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

Comments

Comments

5 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related