Angularjs $http GET json 数据未显示

Question

我正在尝试通过 json 服务器获取 json 数据。我在 http://localhost:3000/records 创建了一个 angularjs 应用程序并使用 json 服务器生成了一个伪造的 REST API。成功返回json数据。但是使用 $http 服务我无法捕获数据!

这是我的服务和 Controller 代码:

服务代码:contact.service.js

   `(function () {
        var app = angular.module("contactApp");
    app.service("contactSvc", contactSvc);

    function contactSvc($http) {

        $http({
            method: "GET",
            url: "http://localhost:3000/records/"
        }).then(function mySuccess(response) {
            var msg = "succès !";
            this.res = response.data.records;
        });
    };})();`

Controller 代码:contact.controller.js

 `(function (){ 
var app = angular.module("contactApp");
app.controller("contactCtrl", contactCtrl);

function contactCtrl(appName,contactSvc) {

    this.applicationName = appName;
    this.contacts = contactSvc.res;
    this.errmsg = contactSvc.msg;

    this.selectContact = function (index) {
        this.selectedContact = this.contacts[index];
    };
}})();`

index.html 的最终代码:

 `<div  ng-controller="contactCtrl as ctrl">
    <ul class="list-group">
      <li ng-repeat="contact in ctrl.contacts" ng-click="ctrl.selectContact($index)">
       {{contact.name.first +" "+contact.name.last}} </li>
     </ul>
    </div>`

非常感谢您的帮助

Answer 1

您应该从 contactSvcfunction 返回 promise，并且在解决后它应该从该函数返回 response.data。

var contactSvc= angular.module("contactApp").service("contactSvc", ['$http', function($http) {
    return {
        getcontacts: function() {    
            return $http.get('http://localhost:3000/records/')
            .then(function(response) {
                console.log("coming from servicejs", response.data);              
                return response.data;
            });
        }
    };
}]);

在您的 Controller 中，您应该调用服务函数并使用 .then 函数在 getResponders 服务函数解析 $http.get 调用并分配数据到 $scope.gotData

代码

 myService.getcontacts().then(function(data){
      this.contacts = data.records;
 });