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

Michael · Accepted Answer · 2016-03-31 01:30:53Z

1

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

answered Mar 31, 2016 at 1:30

Michael

6536 silver badges19 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

ChaseHardin Over a year ago

Thanks @Michael, that did the trick... I'll mark this as the answer. One last question, would this work the same way if there had been multiple rows of JSON data returned or would I need some ng-repeat?

Michael Over a year ago

Yes if the data were in an array the ng-repeat would have worked perfectly. You can test this in the codepen, I've forked it and made the results an array... codepen.io/mkl/pen/vGJvLv

jasonscript · Accepted Answer · 2016-03-31 02:01:57Z

1

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

edited Mar 31, 2016 at 2:01

jasonscript

6,2063 gold badges30 silver badges46 bronze badges

answered Mar 31, 2016 at 1:32

Frederick Mfinanga

1,1552 gold badges11 silver badges29 bronze badges

Collectives™ on Stack Overflow

Consuming RESTful Web Service with AngularJS

2 Answers 2

2 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related