如何使用$ http.get显示数据

时间:2016-10-21 10:29:13

标签: angularjs json ionic-framework

在我的应用程序中我试图使用$http.get从数据库中获取json数组,执行时我无法在我的视图中看到获取的数据。但是在我的浏览器控制台中我能够看到响应显示json数组data:array[5]在展开每个数组时能够看到数组中输入的值。那么如何显示在我的视图页面中提取的数据。

 var brandList=[];
var successCallBack=function(response){
  $log.info(response);
  brandList=response;
};
 var errorCallBack=function(response)
 {
   $log.info(response);
 };
$http({
  method:'get',
  url:'http://local-serve:8081/route/listMake'})
  .then(successCallBack,errorCallBack);  
      return brandList;
}]); 

3 个答案:

答案 0 :(得分:0)

整个响应对象中的响应。你需要从中提取价值。 尝试在浏览器中运行此URL。现在使用相同的URL,这是一个例子:

在JS中,

$http.get('https://jsonplaceholder.typicode.com/photos/1')
   .then(function(response){
     $scope.title = response.data.title;
   })

在HTML中,

<p>
 The title is <i>{{title}}</i>
</p>

答案 1 :(得分:0)

检查下面的代码段。

&#13;
&#13;
function myCtrl($scope, $http) {
  $http.get('http://www.w3schools.com/angular/customers.php')
   .then(function(response){
     $scope.names = response.data.records;
   })
}
&#13;
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app ng-controller="myCtrl">
    <ul>
    <li ng-repeat="x in names">{{x.Country}}</li>
  </ul>
</div>
&#13;
&#13;
&#13;

答案 2 :(得分:0)

当你使用$ http方法时请记住所有都是异步的,所以你必须这样做:

function dataService ($http, $q) {  
    return {
        getAll: getAll
    }

    function getAll () {
        var defered = $q.defer();
        var promise = defered.promise;

        $http.get('my-url')
            .success(function(data) {
                defered.resolve(data);
            })
            .error(function(err) {
                defered.reject(err)
            });

        return promise;
    }
}

现在您可以按照自己的意愿处理结果:

function myController (dataService) {  
    dataService
        .getAll()
        .then(function(data) {
            $scope.elementos = data;
        })
        .catch(function(err)) {
            //Error
        }
}