Manas Sanas
Manas Sanas

Reputation: 372

Angular Parameter $routeParams and http.get params method didn't worked

I am trying to build a blog website using only front-end. My blog data is in an API. I have already build the blog feeds where list of different blogs are shown using AngularJS get method. But for the detailed view of the blog, I need to a single blog data result from the API.

I have already tried using $routeParams option. But it didn't work. My blog API has id parameter which return the blog data of the specific blog ID.

blogdetail.html (Template)

<div>
  <div><h1>Blog Details</h1></div>

  <div ng-repeat="xr in blog">
    {{xr.BLOGID}}
    
  <div>
</div>

blogController.js (Controller)

'use strict';
app.controller('blogController', ['$scope','$http', function ($scope, $http, $routeParams) {
    $http.get('http://example.com/api/blog/', {
        params: {id: $routeParams.id}
    })
       .then(function(res){
          $scope.blog = res.data;
        }).catch(function(response) {
        console.log("ERROR:", response);
    });
}]);

Route Provider of blog detail part of the website:

$routeProvider
    .when("/Blog/:id", {
        controller : "blogController" ,
        templateUrl : "views/BlogDetail.html"
    })

This was the error I was getting:

TypeError: Cannot read property 'id' of undefined

Upvotes: 0

Views: 77

Answers (1)

3960278
3960278

Reputation: 796

u need to add all parameters in the array before the function which are needed in the function, otherwise they are not defined.

the issue is here ['$scope','$http', function

'use strict';
    app.controller('blogController', ['$scope','$http', '$routeParams', function ($scope, $http, $routeParams) {
        $http.get('http://example.com/api/blog/', {
            params: {id: $routeParams.id}
        })
           .then(function(res){
              $scope.blog = res.data;
            }).catch(function(response) {
            console.log("ERROR:", response);
        });
    }]);

Upvotes: 1

Related Questions