Getting data from a web service with Angular.js

前端 未结 4 1708
孤城傲影
孤城傲影 2020-12-29 00:13

Im trying to get data in a Json format from a remote WS using Angular and im having some trouble. The data comes from the web service correctly but i cant use it inside the

相关标签:
4条回答
  • 2020-12-29 00:35
    <!DOCTYPE html>
    <html>
    <head>
        <title>test your webservice</title>
    </head>
    <body>
    
    
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
    <article ng-app="booksInventoryApp">
      <section ng-controller="booksCtrl">
      </section>
    </article>
    <script type="text/javascript">
        var app = angular.module('booksInventoryApp', []);
    
    app.controller('booksCtrl', function($scope, $http) {
    
    
    
                            //ResponseInvocationAgentRequestDTO 
                            var jsonObject = {
                                          "id":65,
                                          "idUserSender": 5}
    
    
                                        console.log("aaaaaaaaaaaaaaaaaaaa");
                $http({
                    method: 'put',             
                    url: 'yout URI' ,
                    data: jsonObject 
                })
                .success(function(data,status){
                    console.log('all is good', data);
    
                    })
                    .error(function(data,status){
                        console.log('Erreur into url '+data);
                    });
    
    
    });
    
    </script>
    </body>
    </html>
    
    0 讨论(0)
  • 2020-12-29 00:46

    You should put your $http.get inside your controller.

    Also, the web service returns an object not an array. So your ng-repeat should be something like this: book in data.books

    Here is a working example:

    var app = angular.module('booksInventoryApp', []);
    
    app.controller('booksCtrl', function($scope, $http) {
    
      $http.get("https://whispering-woodland-9020.herokuapp.com/getAllBooks")
        .then(function(response) {
          $scope.data = response.data;
        });
    });
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
    <article ng-app="booksInventoryApp">
      <section ng-controller="booksCtrl">
        <h2 ng-repeat="book in data.books">{{book.name}}</h2>    
      </section>
    </article>

    0 讨论(0)
  • 2020-12-29 00:47

    Instead of using a run block you can use your $http service inside the controller, then attach your data to the scope like normal. Just remember to inject the $http service into your controller.

    app.controller('booksCtrl', function ($scope, $http) { 
        $http.get("https://whispering-woodland-9020.herokuapp.com/getAllBooks").success(function (data) {
            $scope.booksJson = data;
        });
    });
    
    0 讨论(0)
  • 2020-12-29 00:51

    Create the bookJSON as array, and push the elements instead of assignment. So

    var bookJSON=[];

    Inside $http.get do

    data.forEach(function(item) { bookJSON.push(item); });

    The second console log will show undefined because, the call is async. The assignment happens in future.

    The run method does not guarantee, that the code is run before controller loads.

    There are other ways too to solve this issue.

    Avoid global variable. Look at $routeProvider resolve property.

    Or implement a service to get this data as promise.

    0 讨论(0)
提交回复
热议问题