Issue with Ionic displaying data from AngularJS $http.get request

Having just started learning AngularJS, I have followed tutorials on YouTube and read the documentation, but I am struggling to display data from an API using the $http.get() request.

Here is my 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

Answer №1

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

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

  $scope.fetchData=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 looping through data items
      $scope.info = data.items;
    })
    .catch(function(response){
      alert("error");
    })
  };
});

To access the first Date and Message or all entries, you can use ng-repeat in your HTML to iterate over the API data.

In your HTML:

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

Answer №2

Utilize the ng-repeat directive to display a list of information:

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

The methods .success and .error are no longer supported. 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>

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Partially translucent electron window

Is there a way in Electron to create a view similar to the finder in macOS, where the sidebar is opaque and the main content is not? https://i.stack.imgur.com/UKXg2.jpg I am aware of how to make an entire window opaque, but I'm unsure if it's p ...

What's the best method for efficiently hiding/showing a large number of DOM elements?

Imagine you have a maximum of 100 elements that remain consistent in type and format, but their content changes. These elements are connected to an input field and will update as the user types. What would be the most efficient approach for maximizing per ...

How to display a page outside the router-outlet in angular 4

I'm currently developing an angular 4 application and I am trying to figure out how to load the login.page.ts outside of the router-outlet This is what my home.component.html file looks like: <div class="container"> <top-nav-bar></ ...

Encountering a Typescript TypeError in es2022 that is not present in es2021

I'm attempting to switch the target property in the tsconfig.json file from es2015 to es2022, but I am encountering an error while running tests that seem to only use tsc without babel: Chrome Headless 110.0.5481.177 (Mac OS 10.15.7) TypeError: Can ...

Step-by-step guide on how to effectively send a NodeJS request and stream it into a separate response

Currently, I am in the process of developing an API to interact with a specific map service that requires the use of an API key. It is crucial for me to keep this API key private. To achieve this, I plan to make internal calls within my server's own A ...

Using AngularJS to inject a variable into the standard filter

Currently, I am attempting to develop a custom filter that mimics the functionality of the standard Angular filter in HTML, with the distinction that it accepts a variable as input rather than a fixed value. For instance, within my html document, you may ...

AngularJS Error: The maximum number of $digest() iterations (10) has been reached in a custom directive, causing the process to

Trying to assess the accuracy of a user's answer, I have implemented a custom directive that appends a correct icon if the answer is right. However, I keep encountering the notorious Error: 10 $digest() iterations reached. Aborting! error. Here is an ...

How should a JavaScript object be properly formatted?

Recently, I created a project using ng-repeat with AngularJS 1.x, and it was smooth sailing. JavaScript: var app = angular.module('myModule', []); app.controller('myController', function() { this.dishes = [ { 'name&a ...

What is the best way to add an element after a specific child element with jquery?

Is there a way to add a paragraph element after a specific div class element? I am looking to include a p element within the second text div class. I attempted a solution, but it is not producing the desired result. The current solution is not effective. ...

Is there a way to modify the package version with yarn, either upgrading or downgrading?

Is there a way to downgrade the version of a package using yarn's "dependencies" feature? ...

Exception in posting strings or JSON with react.js

Whenever a user clicks on the Signup button, the process I follow to create an account is as follows: Firstly, a new User entry is created in the database. createUser = () =>{ var xhr = new XMLHttpRequest(); xhr.open('POST', 'http:// ...

What is the best way to arrange this script?

I am currently working on a Javascript script that automatically scrolls down and loads a new URL when it reaches the bottom of the page. However, I would like to add a delay of 30 seconds before the new URL is loaded. Although I am relatively new to Java ...

Error loading 'protobuf.js' while retrieving Firestore document

When trying to run a basic node file with Firebase and Firestore, the following code was used: const firebase = require("firebase"); const http = require('http') require("firebase/firestore"); firebase.initializeApp({ apiKey: '...' ...

What causes parameters to be initially passed as undefined when sending them from one component to another, only to later arrive with the actual data intact

When passing properties from a parent component to a child component, my code gets executed before the properties arrive. This results in an error stating "Cannot read properties of undefined (reading 'map')". Why does this occur? https://i.ssta ...

What could be causing this issue of the Angular Material table not displaying properly?

I have been developing a Contacts application using Angular 9 and Angular Material. The goal is to display contact information and an image for each contact in a table row within the list component. Within my app.module.ts, I have imported various modules ...

Incorporating video responses into an HTML player using Node.js with the req.pipe(res) method

I have successfully implemented ytdl-core to play a video and it is working as expected. Below is the code snippet: app.get('/',function(req,res) { var fs = require('fs'); var ytdl = require('ytdl-core'); ...

Having trouble with the Vuejs validation code not functioning correctly?

I need help with a JavaScript function that posts objects to the backend only if all items are numbers. Here is the code snippet I'm working with: var MyApp = new Vue({ el: '#my_element', data: { errors: [], ...

Use jQuery to trigger a click event when an element is in focus, unless it was clicked to

I am currently developing a website using the MDL framework. One issue I encountered is that there is no default select form element provided. After some research, I found a solution by utilizing a menu component that displays when the input is clicked. Th ...

Having trouble getting an HTML form to work when making a PHP and Ajax request

I am trying to validate an HTML form using Ajax to prevent the browser from loading the page. Ideally, when a user enters their first name, it should display above the HTML form. However, I am encountering an issue where it is not showing up as expected... ...

The function Jquery.html() seems to be malfunctioning in IE7, however, innerHTML is working correctly in the

One of my recent implementations involves populating a div using an ajax response. Take a look at the code snippet below for better understanding: jQuery.ajax({ type: 'POST', url: url, dataType: 'json', data:data, s ...