AngularJS: Using $http.get to retrieve data and making it available

Question

I am very new to AngularJS and want to get started retrieving data from a remote source.

My app.js file looks like this:

var app = angular.module('footy', []);

app.controller('ClubController', ['$http', function($http){

    var club = this;
    club.team = [];

    $http.get('http://api.football-data.org/teams/19').success(function(data){
        club.team = data;
    });
}]);

and my html looks like this:

<!doctype html>
<html ng-app="footy">
<head>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular.min.js"></script>
    <script src="app.js"></script>
</head>
<body>

  <div ng-controller = "ClubController as data">
    {{data.club.team.name}}
  </div>
</body>
</html>

When I view the page in a browser all that is returned is a blank page and in the source I can see "{{data.club.team.name}}" between the div.

When I view the data source Url in a browser I see this:

{

"id": 19,
"name": "Eintracht Frankfurt",
"shortName": "Eintr. Frankfurt",
"crestUrl": "http://upload.wikimedia.org/wikipedia/commons/0/04/Eintracht_Frankfurt_Logo.svg"
}

I have gone through and completed this course: http://campus.codeschool.com/courses/shaping-up-with-angular-js/ and was trying to apply the instructions from chapter 5 about services to this but I am having no luck.

Can someone help? Thanks in advance.

<div ng-controller = "ClubController as data"> should be <div ng-controller="ClubController as data"> — lxe
– lxe, Commented May 15, 2015 at 20:47
@aarong looks like it does api.football-data.org/register i have an API key. — 404error
– 404error, Commented May 15, 2015 at 20:53

Aaron Greenwald · Accepted Answer · 2015-05-15 21:07:10Z

2

I see two problems here:

http://api.football-data.org/teams/19 doesn't allow CORS. You can't load the data. Update: The OP pointed out that s/he has an API key that allows CORS. This is not the issue then, but might be for other people trying to reproduce this.
{{data.club.team.name}} should be {{data.team.name}} because you said var club = this;. In other words, the controller you aliased data is the same as the club object. The club object is not a property of the controller data, it IS the controller's data.

See this plnkr for a demo. The commented out code doesn't work because of the api key, the locally hosted file does: http://plnkr.co/edit/ItD96Zfk0g1cLyGrrgBy?p=preview

edited May 15, 2015 at 21:07

answered May 15, 2015 at 20:53

Aaron Greenwald

9275 silver badges13 bronze badges

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

Collectives™ on Stack Overflow

AngularJS: Using $http.get to retrieve data and making it available

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related