Guide to building a simple AngularJS webpage to fetch and display RESTful JSON data

Question

Guide to building a simple AngularJS webpage to fetch and display RESTful JSON data

I am in the process of developing a simple webpage that displays data retrieved from

http://rest-service.guides.spring.io/greeting

.

The JSON output looks like this:

{"id":2273,"content":"Hello, World!"}

This is the HTML code I am using:

<body ng-app="hello">
    <div class="container">
        <h1>Greeting</h1>
        <div ng-controller="home" ng-cloak class="ng-cloak">
            <p>The Id is: {{greeting.id}}</p>
            <p>The content is: {{greeting.content}}</p>
        </div>
    </div>
    <script src="js/angular-bootstrap.js" type="text/javascript"></script>
    <script src="js/hello.js"></script>
</body>

And here is the hello.js file:

var myApp = angular.module('hello', []);

myApp.controller('home', ['$scope', function($scope) {
    $scope.greeting = {};

    $http.get('http://rest-service.guides.spring.io/greeting')
        .success(function(data, status, headers, config) {
            $scope.greeting = data;
        });
}]);

Issue: the placeholders greeting.id/content are not getting resolved. What could be causing this problem?

javascript json angularjs rest

Answer 1

Answer №1

Don't forget to include the $http service in your code.

myApp.controller('home', ['$scope, $http', function($scope, $http) {...}]);

UPDATE

Additionally, as mentioned by cverb in their response, it's important to note that in Angular 1.4, you should use .then() instead of .success() since .success() is now deprecated.

The correct usage is now:

$http.get(url).then(
  function(data){
     //success callback
  }, 
  function(){
     //error callback
  });
);

Answer 2

Don't forget to include the $http service in your code.

myApp.controller('home', ['$scope, $http', function($scope, $http) {...}]);

UPDATE

Additionally, as mentioned by cverb in their response, it's important to note that in Angular 1.4, you should use .then() instead of .success() since .success() is now deprecated.

The correct usage is now:

$http.get(url).then(
  function(data){
     //success callback
  }, 
  function(){
     //error callback
  });
);

Answer 3

Answer №2

Update your $http request to the code snippet below. Additionally, make sure you inject $http in your controller.

$http.get('http://api.example.com/data')
    .then(function(response) {
        $scope.data = response.data;
    });

Answer 4

Update your $http request to the code snippet below. Additionally, make sure you inject $http in your controller.

$http.get('http://api.example.com/data')
    .then(function(response) {
        $scope.data = response.data;
    });

Answer 5

Answer №3

Make sure to update your code from using .success() to .then(). The .success() method is outdated and behaves differently compared to a regular promise.

If you prefer to stick with the old method, simply follow this example:

 $http.get('http://rest-service.guides.spring.io/greeting')
        .success(function(data) {
            $scope.greeting = data;
        });

For more information, refer to the official documentation on $http.

Answer 6

Make sure to update your code from using .success() to .then(). The .success() method is outdated and behaves differently compared to a regular promise.

If you prefer to stick with the old method, simply follow this example:

 $http.get('http://rest-service.guides.spring.io/greeting')
        .success(function(data) {
            $scope.greeting = data;
        });

For more information, refer to the official documentation on $http.

Guide to building a simple AngularJS webpage to fetch and display RESTful JSON data

Answer №1

Answer №2

Answer №3

Similar questions

What's the best way to dynamically show Bootstrap collapse panels in a loop with AngularJS ng-repeat?

Is there a way for me to add a clickable link within a tooltip?

What is the best way to upload images in Vue.js without using base64 formatting?

Saving changes to mesh vertices in r67 of Three.js

Combining multiple rows into one using either mysql or lodash was achieved by Node

Can we verify if this API response is accurate?

JavaScript Countdown Timer Programming

implementing one active line item at a time in Vue

Creating a dynamic search bar using Ajax with support for multiple keywords

I'm looking for a solution to reorganize my current state in order to display the image URL

Add a trash can or delete icon within every row of a table using Vue.js

Implementing jquery document.ready() with <img onload> event

Preventing an event from bubbling up to its parent in a jQuery Ajax call: A step-by-step guide

JavaScript can intelligently extract and categorize an array of objects based on their properties

Error in Laravel npm package

Choosing Angular UI-Router Nested View by default

How can Symfony, Jquery, and Ajax work together to append elements to themselves?

Employing buttons and state to eliminate an item from a roster

Update the button functionality according to the button's unique identifier

Storing Data in an Array Using MongoDB's $push Method Depending on a Variable's Value