CODEWITHSUNDEEP
angularjshtmlasp.net-web-api
dlp_dev
dlp_dev

Reputation: 148

Querying Web API with AngularJS

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

Upvotes: 1

Views: 183

Answers (2)

Bimlendu Kumar
Bimlendu Kumar

Reputation: 346

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){}
    );
};

Upvotes: 1

lealceldeiro
lealceldeiro

Reputation: 14968

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.

Upvotes: 2

Related Questions