Consuming RESTful Web Service with AngularJS

Question

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/

https://spring.io/guides/gs/consuming-rest-angularjs/

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

Answer 1

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

Answer 2

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

Consuming RESTful Web Service with AngularJS

Question

2 answers

solution1
1 ACCPTED 2016-03-31 01:30:53

solution2
1 2016-03-31 01:32:07

Consuming RESTful Web Service with AngularJS

Question

2 answers

solution1 1 ACCPTED 2016-03-31 01:30:53

solution2 1 2016-03-31 01:32:07

solution1
1 ACCPTED 2016-03-31 01:30:53

solution2
1 2016-03-31 01:32:07