Querying Web API with AngularJS

Question

I've been following this tutorial and have the following controller:

(function (app) {
var MusicListController = function ($scope, $http) {
    $http.get("/api/Musics").then(function (data) {
        $scope.musics = data;
    },function (response){}
    );
};
app.controller("MusicListController", MusicListController);
}(angular.module("theMusic")));

module:

(function () {
var app = angular.module('theMusic', []);
}());

and html:

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta charset="utf-8" />
<title>Music App</title>
<script src="../../Scripts/angular.js"></script>
<script src="../../Scripts/jquery-1.10.2.js"></script>
<link href="../../Content/Site.css" rel="stylesheet" />
<link href="../../Content/bootstrap.css" rel="stylesheet"/>
<script src="../../Scripts/bootstrap.js"></script>
<script src="../Scripts/theMusic.js"></script>
<script src="../Scripts/MusicListController.js"></script>
</head>
<body>
<div ng-app="theMusic">
    <div ng-controller="MusicListController">
        <table class="table table-bordered">
            <thead>
                <tr>
                    <th>Title</th>
                    <th>Singers</th>
                </tr>
            </thead>
            <tbody>
                <tr ng-repeat="music in musics">
                    <td>{{music.Title}}</td>
                    <td>{{music.Singers}}</td>
                </tr>
            </tbody>
        </table>
    </div>
</div>
</body>
</html>

It's supposed to display the results of an API request but currently all that is displayed is an empty table. I suspect my problem lies somewhere with my $http.get.then function as the tutorial used what seems to be a deprecated $http.get.success and I looked up the new way of doing it.

If I go to (localhost)/api/musics while debugging it does return the XML file with the data in it.

Could someone help?

Thanks

first of all, look in dev tools ( F12 ), under network tab and see what your http call returns. — Andrei Dragotoniu
– Andrei Dragotoniu, Commented Feb 28, 2018 at 14:02

lealceldeiro · Accepted Answer · 2018-02-28 14:44:13Z

2

When you use $http.get("...").then() what you get in the object passed as argument in the callback (function inside the then) is not the data itself but the whole HTTP response. So you have to access the data inside the response.

In your case, suppose the Web API responds like this: {"musics": [{"author": "Jon Doe", "title": "abc"}]} ... you need to do it like this:

$http.get("/api/Musics").then(function (response) {
    $scope.musics = response.data; // <-- here we are getting the object `data` which is inside the whole `response`
},function (response){}
);

This is different from the deprecated $http.get.success which, indeed, put the data (extracted from the HTTP response) as argument to the callback function.

edited Feb 28, 2018 at 14:44

answered Feb 28, 2018 at 14:01

lealceldeiro

15.1k7 gold badges54 silver badges85 bronze badges

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

1 Comment

dlp_dev Over a year ago

Changing $scope.musics = data; to $scope.musics = data.data; did it. Thanks!

Liam · Accepted Answer · 2018-02-28 15:40:03Z

1

You should do data.data for collecting response:

var MusicListController = function ($scope, $http) {
    $http.get("/api/Musics").then(function (data) {
        $scope.musics = data.data;
    },function (response){}
    );
};

edited Feb 28, 2018 at 15:40

Liam

30k28 gold badges143 silver badges206 bronze badges

answered Feb 28, 2018 at 14:21

Bimlendu Kumar

3462 silver badges17 bronze badges

Collectives™ on Stack Overflow

Querying Web API with AngularJS

2 Answers 2

1 Comment

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related