How to use angular ng-repeat with an Web api?

Question

I'm trying to build a website using front-end html and get its data from a Web-api. My Web-api returns a json format. So I was trying to use the Get request using Angular $http and ng-repeat directive. My angular controller is like this -

'use strict';  app.controller('blogsController', ['$scope','$http', function ($scope, $http) {
$http.get('www.example.com/api/blog')
   .then(function(res){
      $scope.blogs = res.data;
    });
}]);

The html code looks like this -

<body app="ng-app" >
   <div ng-repeat="xr in blogs" >
     <div id="blog_title" >
       {{xr.blog_title}}
     </div>

     <div id="blog_text">
       {{xr.blog_text}}
     </div>
   </div>

</body>

I have tried this but this is not getting me the data from the blog web api.

Please help me to get the solution.....

Sunny · Accepted Answer · 2020-01-27 18:18:11Z

1

there is nothing wrong in your code

<div ng-repeat="xr in blogs" >
     <div id="blog_title" >
       {{xr.blog_title}}
     </div>

     <div id="blog_text">
       {{xr.blog_text}}
     </div>
   </div>

but make sure that your res.data must follow an arrangement like below:

res.data = [{'blog_title': 'title value1', 'blog_text':'text value'}
            {'blog_title': 'title value2', 'blog_text':'text value'}
            {'blog_title': 'title value3', 'blog_text':'text value'}]

print your res.data in web console using console.log to confirm.

answered Jan 27, 2020 at 18:18

Sunny

6159 silver badges24 bronze badges

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

Comments

Sajeetharan · Accepted Answer · 2020-01-27 07:18:36Z

0

You are missing ng-controller on the template, and app should be ng-app

<body ng-app="ng-app" ng-controller="blogsController">
   <div ng-repeat="xr in blogs" >
     <div id="blog_title" >
       {{xr.blog_title}}
     </div>

     <div id="blog_text">
       {{xr.blog_text}}
     </div>
   </div>

</body>

answered Jan 27, 2020 at 7:18

Sajeetharan

223k65 gold badges370 silver badges409 bronze badges

1 Comment

Manas Sanas Over a year ago

I have added ng-controller but still it's not working.

Collectives™ on Stack Overflow

How to use angular ng-repeat with an Web api?

2 Answers 2

Comments

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related