Issue
I was trying to develop a website using Front-End HTML and AngularJS. I also have a WebApi Hosted online. i was trying to get the data from the WebApi which is in JSON Format using angularjs controller http get method and display it using ng-repeat directive but I'm not getting the data, there is some problem in getting the data from the WebApi. The WebApi is created using asp.net c# WebApi. The Code the Website is here (Its a blog website) -
blogController.js :
app.controller('blogController', ['$scope','$http', function ($scope, $http) {
$http.get('http://www.example.com/api/blog')
.then(function(res){
$scope.blog = res.data;
});
}]);
The HTML Code is here below -
Blog.html
<html>
<head></head>
<body app="myApp" ng-controller="blogController">
<div ng-repeat="blg in blog">
<h2>{{blg.BLOG_TITLE}}</h2><br/><br/><hr/>
<p>{{blg.BLOG_DESC}}</p><br/>
<p>{{blg.BLOG_AUTHOR}}</p>
</div>
</body>
</html>
The Json WebApi looks like this -
[
{
"ID": 1.0,
"BLOG_DATE": "2020-05-02T00:00:00",
"BLOG_AUTHOR": 1.0,
"IMG_URL": null,
"BLOG_TITLE": "Test Blog",
"SHORT_DESC": "Blog 1",
"BLOG_DESC": "Blog1 Desc",
"NOTE": null,
"BLOG_TAG": "Uncategorized"
},
{
"ID": 2.0,
"BLOG_DATE": "2020-05-02T00:00:00",
"BLOG_AUTHOR": 1.0,
"IMG_URL": null,
"BLOG_TITLE": "Test Blog",
"SHORT_DESC": "Blog 1",
"BLOG_DESC": "Blog1 Desc",
"NOTE": null,
"BLOG_TAG": "Uncategorized"
},
{
"ID": 3.0,
"BLOG_DATE": "2020-05-02T00:00:00",
"BLOG_AUTHOR": 1.0,
"IMG_URL": null,
"BLOG_TITLE": "Test Blog",
"SHORT_DESC": "Blog 1",
"BLOG_DESC": "Blog1 Desc",
"NOTE": null,
"BLOG_TAG": "Uncategorized"
},
{
"ID": 4.0,
"BLOG_DATE": "2020-05-02T00:00:00",
"BLOG_AUTHOR": 1.0,
"IMG_URL": null,
"BLOG_TITLE": "Test Blog",
"SHORT_DESC": "Blog 1",
"BLOG_DESC": "Blog1 Desc",
"NOTE": null,
"BLOG_TAG": "Uncategorized"
}
]
The problem is occuring only with the url which is in the above controller. I have tried using another url, a url from myjson.com, it worked. But the "http://www.example.com/api/blog" doesn't works.
Please help me to solve this problem.
Solution
Add a .catch block to display errors:
app.controller('blogController', ['$scope','$http', function ($scope, $http) {
$http.get('http://www.example.com/api/blog')
.then(function(res){
$scope.blog = res.data;
}).catch(function(response) {
console.log("ERROR:", response);
});
}]);
Then check the response in the network tab of the Developer Console.
Answered By - georgeawg
0 comments:
Post a Comment
Note: Only a member of this blog may post a comment.