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, Feb 28 '18 at 14:02

lealceldeiro · Accepted Answer · 2018-02-28T14:44:13.173

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.

Changing `$scope.musics = data;` to `$scope.musics = data.data;` did it. Thanks! — dlp_dev, Feb 28 '18 at 15:53

score 1 · Answer 2 · edited Feb 28 '18 at 15:40

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 '18 at 15:40

Liam

27,717
28
128
190

answered Feb 28 '18 at 14:21

Bimlendu Kumar

226
2
17

Querying Web API with AngularJS

2 Answers2