CODEWITHSUNDEEP
javascriptangularjsrest
ChaseHardin
ChaseHardin

Reputation: 2269

Consuming RESTful Web Service with AngularJS

I'm going through a few tutorials on consuming an API using AngularJS... I'm running into issues while trying to run {{greeting.id}} and {{greeting.content}}. I'd assume that this renders the results, but they are not visible on my screen.

Here is my CodePen: http://codepen.io/ChaseHardin/pen/bprObb/

  1. https://spring.io/guides/gs/consuming-rest-angularjs/
  2. http://codepen.io/theshravan/pen/mnbcx

Why doesn't my id and content display on the UI; is the issue with my HTML or JavaScript?

HTML

<html>
<head>
  <link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.0.3/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.9/angular.min.js"></script>
</head>
<body ng-app="myApp">
  <div ng-controller="GreetingController" class="container">
    <h1>Greeting</h1>
    <hr/>
    <div ng-repeat="greeting in greetings" class="col-md-6">
      <h4>{{greeting.id}}</h4>
      <p>{{greeting.content}}</p>
    </div>
  </div>
</body>
</html>

JavaScript

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

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

Upvotes: 2

Views: 2240

Answers (2)

Frederick Mfinanga
Frederick Mfinanga

Reputation: 1155

Here you go;

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

myApp.controller("GreetingController", function ($scope, $http) {
    $http.get('http://rest-service.guides.spring.io/greeting').then(function (data) {
      $scope.greetings = data;
      console.log(data);
    });
});

Upvotes: 1

Michael
Michael

Reputation: 653

Remove the ng-repeat. The results aren't in an array.

Upvotes: 1

Related Questions