How to call a http Get service and dispaly its response in a div in angularjs on button click?

Question

I am trying to call a $http Get service on button click in angular js. But I am not getting the data to show in results... My code snippet is as follows:-

<button ng-controller="myCtrl6" ng-click="search()">Click</button>
<p ng-controller="myCtrl6">
  {{results}}
  {{fail}}
</p>

var app = angular.module("myApp", []);
app.controller('myCtrl6', ['$scope', '$http', function ($scope, $http) {
  $scope.results = "";
  $scope.fail = "f";
  $scope.search = function() {
    $http.get('welcome.html', {}, function(response) {
      $scope.results = response.data; 
    }, function (failure) { 
      console.log("failed :(", failure); 
    });
  }
}]);

welcome.html

Hello World

Check this https://stackoverflow.com/questions/41169385/http-get-success-is-not-a-function — Subhabrata Mondal, Jul 18 '17 at 11:12
The shortcut method usage for $http is given in the docs: $http.get('/someUrl', config).then(successCallback, errorCallback); https://docs.angularjs.org/api/ng/service/$http — L4reds, Jul 18 '17 at 11:16

Yordan Nikolov · Answer 1 · 2017-07-18T11:41:26.970

This is the proper use of $http

$http({
  method: 'GET',
  url: '/someUrl'
}).then(function successCallback(response) {
    // in your case 
    $scope.results = response.data; 
  }, function errorCallback(response) {
    // called asynchronously if an error occurs
    // or server returns response with an error status.
  });

or

$http.get('/someUrl', config).then(successCallback, errorCallback);

Better make a service for this :

app.factory('ServiceName', function() {
  return {
     search: search
  };

  function search () {
    return $http.get('/someUrl', config);
  }
});

in controller

var app = angular.module("myApp", []);
app.controller('myCtrl6', ['$scope', 'ServiceName', function ($scope, serviceName) {
  $scope.search = function() {
    serviceName.search().then(function(response) {
      $scope.results = response.data; 
    });
  }
}]);

Edited

the name of your service, you can name it as you wish ... `SearchService` for example. It is up to you — Yordan Nikolov, Jul 18 '17 at 11:56

score 0 · Answer 2 · answered Jul 18 '17 at 11:53

Wrap your button and p tag inside div(main container), by doing this you can access your controllers scope only inside that main container not outside of that.

<div ng-controller="myCtrl6">
        <p >{{results}}
        {{fail}}
        </p>
        <button ng-click="search()">Fetch Data</button>
</div>

And in script.js file write

$scope.search = function () {                    
          $http.get('welcome.html')
          .success(function(response) {
            $scope.results = response;
          })
          .error(function(error) {
            console.log("error is : " + JSON.stringify(error))
          })
    }

How to call a http Get service and dispaly its response in a div in angularjs on button click?

2 Answers2