CODEWITHSUNDEEP
javascriptangularjsionic-frameworkangularjs-http
Keshav Sharma
Keshav Sharma

Reputation: 35

AngularJS $http.get request not displaying data in Ionic

I am new to AngularJS, and after using the commands as shown in several youtube tutorials and reading the documentation, I cannot seem to get the data displayed on an API, using $http.get() request.

JavaScript and html code:

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

Upvotes: 1

Views: 197

Answers (2)

georgeawg
georgeawg

Reputation: 48968

Use the ng-repeat directive to show a list of data:

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

The ̶.̶s̶u̶c̶c̶e̶s̶s̶ and ̶.̶e̶r̶r̶o̶r̶ methods are deprecated. Instead use .then and .catch:

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

The DEMO

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>

Upvotes: 0

Jesus Carrasco
Jesus Carrasco

Reputation: 1354

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");
    })
  };
});

that if you want the first Date and Message i you want all. yo need to use ng-repeat in you html to iterate the data from api.

in the html 

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

Upvotes: 1

Related Questions