【问题标题】：AngularJS $http.get request not displaying data in IonicAngularJS $http.get 请求不在 Ionic 中显示数据
【发布时间】：2017-07-22 21:09:12
【问题描述】：

我是 AngularJS 的新手，在使用了几个 youtube 教程中显示的命令并阅读了文档之后，我似乎无法使用 $http.get() 请求在 API 上显示数据。

JavaScript 和 html 代码：

var exampleApp= angular.module('app', ['ionic']);

exampleApp.controller('exampleController', function($scope, $http){
  
  $scope.getData=function(){
      $http.get("https://p3ddibjuc6.execute-api.us-west-2.amazonaws.com/prod/entries")
    .success(function(data){
      $scope.Date= data.Date;
      $scope.message= data.message;
    })
    .error(function(data){
      alert("error");
    })
  };
} );

!DOCTYPE html>
<html ng-app="app">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width">
    <link href="https://code.ionicframework.com/1.0.0/css/ionic.min.css" rel="stylesheet">
    <script src="https://code.ionicframework.com/1.0.0/js/ionic.bundle.js"></script>
  </head>
  <body ng-app="app">
    <ion-pane>
      <ion-header-bar class="bar-stable">
        <h1 class="title">Awesome App</h1>
      </ion-header-bar>
      <ion-content class="padding" ng-controller="exampleController">
        <button class="button button-assertive" ng-click="getData()">click</button>
        <br>
        MESSAGE: {{message}}
        <br>
        Date: {{Date}}
      </ion-content>
    </ion-pane>
  </body>
</html>

enter code here

【问题讨论】：

我无法从 API 获取数据以显示在 html 屏幕上
api 的响应。 (data) 有属性 Date?
@JesusCarrasco API (p3ddibjuc6.execute-api.us-west-2.amazonaws.com/prod/entries) 存储有关我要显示的“日期”和“消息”的数据。
呃，没有。看看它返回了什么。 message 是 Items 属性中的一个对象的属性，而不是顶级 json 对象的属性。
@KeshavSharma 你能发布 api 的答案吗，我的代理有问题。

标签： javascript angularjs ionic-framework angularjs-http

【解决方案1】：

var exampleApp= angular.module('app', ['ionic']);

exampleApp.controller('exampleController', function($scope, $http){

  $scope.getData=function(){
      $http.get("https://p3ddibjuc6.execute-api.us-west-2.amazonaws.com/prod/entries")
    .then(function(response){
      var data = response.data;
      $scope.Date= data.items[0].Date;
      $scope.message= data.items[0].message;

//for iterate do somethin lik this
      $scope.info = data.items;
    })
    .catch(function(response){
      alert("error");
    })
  };
});

如果你想要第一个日期和消息，我想要所有。你需要在你的 html 中使用 ng-repeat 来迭代来自 api 的数据。

在html中

<div ng-repeat="item in info"> 
Date: {{item.Date}}
message: {{item.message}}
</div>

【讨论】：

非常感谢！！
很高兴。帮忙！！
如果答案有帮助，请检查答案是否正确。

【解决方案2】：

使用ng-repeat directive 显示数据列表：

  <div ng-repeat="item in Items"> 
      Date: {{item.Date | date}}
    <br>
      MESSAGE: {{item.message}}
  </div>

̶.̶s̶u̶c̶c̶e̶s̶s̶ 和 ̶.̶e̶r̶r̶o̶r̶ 方法已弃用。而是使用.then 和.catch：

  $http.get(url)
    .then(function(response){
      var data = response.data;
      $scope.Items = data.Items;
  })
    .catch(function(response){
      console.log("error: ",response.status);
  })

演示

angular.module('app', ['ionic'])

.controller('exampleController', function($scope, $http){
  $scope.getData=function(){
    var url = "https://p3ddibjuc6.execute-api.us-west-2.amazonaws.com/prod/entries"
    $http.get(url)
    .then(function(response){
      var data = response.data;
      $scope.Items = data.Items;
    })
    .catch(function(response){
      console.log("error");
    })
  };
});

<!DOCTYPE html>
<html ng-app="app">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width">
    <link href="//unpkg.com/ionic-sdk/release/css/ionic.min.css" rel="stylesheet">
    <script src="//unpkg.com/ionic-sdk/release/js/ionic.bundle.js"></script>
  </head>
  <body ng-app="app">
    <ion-pane>
      <ion-header-bar class="bar-stable">
        <h1 class="title">Awesome App</h1>
      </ion-header-bar>
      <ion-content class="padding" ng-controller="exampleController">
        <button class="button button-assertive" ng-click="getData()">click</button>
        <br>
        <div ng-repeat="item in Items"> 
          Date: {{item.Date | date}}
        <br>
          MESSAGE: {{item.message}}
        </div>
      </ion-content>
    </ion-pane>
  </body>
</html>

【讨论】：