Question

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

这是我的服务和控制器代码：

服务代码：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;
        });
    };})();`

控制器代码：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返回诺言，解决后应从该函数返回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;
            });
        }
    };
}]);

在您的控制器中，应调用service函数，并在getResponders服务函数解析$ http.get调用并将数据分配给$ scope时使用 .then 函数进行调用。 .gotData

Code

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

Angularjs $ http GET json数据未显示

1 个答案: