Http request using AngularJS controller

Question

I am trying to show the data coming from a server, I tried to make a controller and copy the response to a property of scope. I tried 'response' and 'response.data' and none of them worked.

the html file looks like this:

<!DOCTYPE html>
<html>
<head>
    <script src="angular.min.js"></script>
    <title>Service Call ...</title>
</head>

<body>
    <script>
        var app = angular.module('myApp', []);

        app.controller('customersCtrl', function($scope, $http) {
            $http.get("https://linkToServer.json")
                .success(function(response) {$scope.trainings = response.data;
            });
        });
    </script>

    <div ng-app="myApp" ng-controller="customersCtrl">  
        <ul>
            <li ng-repeat="tr in trainings">
                {{ tr.id }}
            </li>
        </ul>
    </div>
</body>
</html>

The json structure is something like:

[
  {
    "id" : "sm1001",
    "name" : "Lu",
  },
{
    "id" : "lm9898",
    "name" : "Di",
  },
  ....
]

What is wrong?

Plunkr of the problem

have you tried .success(function(response) {$scope.trainings = response; ? — Vineet
– Vineet, Commented Aug 6, 2015 at 20:22
I beg your pardon @PankajParkar I will keep it in mind for the next time. — Vineet
– Vineet, Commented Aug 6, 2015 at 20:27
Look at the network tab in your browser's debugger console, I bet you'll find an error there. — Daniel Gimenez
– Daniel Gimenez, Commented Aug 6, 2015 at 20:31

Mathias F · Accepted Answer · 2015-08-06 20:47:12Z

1

Your plunk worked when I corrected the json. You did not include the json in the sample. I copied it from your question.

"name" : "Lu",

needs to be

"name" : "Lu"

http://plnkr.co/edit/toSicojh58y1lWrziyI8?p=preview

This might be only your sample data. The angular code is working fine.

answered Aug 6, 2015 at 20:47

Mathias F

16k25 gold badges95 silver badges167 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Ids Klijnsma · Accepted Answer · 2015-08-06 20:36:25Z

0

I think it's because your html is all messed up. First a div, then a head tag I've updated your plunkr, now it's working: http://plnkr.co/edit/6Y1dX9vKkDANdZyEd0aj?p=preview

answered Aug 6, 2015 at 20:36

Ids Klijnsma

4623 silver badges9 bronze badges

1 Comment

Masih Over a year ago

Thanks for your answer, I changed the order and still not working!

Collectives™ on Stack Overflow

Http request using AngularJS controller

2 Answers 2

Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related