Angularjs - Displaying data using $http get from remote server

Question

i want to send a http get request which is not a problem. But the problem is i want to disply the data from the server page. Does it has to be a JSON page to display the data from remote server ? or any sort of data can be displayed ? if yes , then how Thank you

<div class="form" ng-app="myApp" ng-controller="myCtrl">
  <p>Enter URL : <input type="text" ng-model="url" /></p>

  <p><input type="submit" value="CHECK" ng-click="callAPI()" /> </p> <!-- 1 -->
  <p>
    <ul ng-repeat="post in posts">
        <li>{{post}}</li>

</ul>
  </p>

  <div ng-bind="result"></div>  <!--  5 -->
</div>


    <script>
            var app = angular.module('myApp', []);
                app.controller('myCtrl', function($scope, $http) {

                        $scope.callAPI = function() {             // 2
                        //console.log($scope.url);                //3
                            $http.get($scope.url)
                            .success(function(response) {
                             $scope.posts = response.data;       //4
                                });
                             };

                        });

    </script>
</body>
</html>

another version of code

<div class="form" ng-app="myApp" ng-controller="myCtrl">
  <p>Enter URL : <input type="text" ng-model="url" /></p>

  <p><input type="submit" value="CHECK" ng-click="callAPI()" /> </p> 


 <div ng-bind="result"></div>  <!--  5 -->
</div>


        <script>
                var app = angular.module('myApp', []);
                    app.controller('myCtrl', function($scope, $http) {
                                $scope.$watch('url', function() {
                                  fetch();
                                });



                                function fetch() {

                                    console.log($scope.url);                  
                                        $http.get($scope.url)
                                            .success(function(response) {
                                         $scope.result = response.data;      
                                            });
                                         }

                                   $scope.callAPI= function() {
                                      this.setSelectionRange(0,      this.value.length);
                                }

                          });

        </script>
</body>
</html>

Answer 1

Like the comments says, I believe that angular look at the content Type of the response to parse the data. Have you try added the accept header type?

What is the content type of the response?

var req = {
 method: 'GET',
 url: 'http://example.com',
 headers: {
   'Accept': change this to whatever content you want to accept
 },
 data: { test: 'test' }
}

$http(req).then(function(){...}, function(){...});

Answer 2

hey i have found my answer of my question ... there was a mistake in the source code here is the right one

<div class="form" ng-app="myApp" ng-controller="myCtrl as controller">
      <p>Enter URL : <input type="text" ng-model="url" /></p>

      <p><input type="submit" value="CHECK" ng-click="clickButton()" /> </p>                
      <p>
        <ul>
            <li ng-repeat="data in result">
                {{data}}
            </li>

        </ul>
      </p>

    </div>

and

<script>
            var app = angular.module('myApp', []);
                app.controller('myCtrl', function($scope, $http) {
                    $scope.clickButton = function() {                               
                        console.log($scope.url);                                
                        $http.get($scope.url)
                            .then(function(response) {
                             $scope.result = response.data;     
                                });
                             };

                        });

    </script>

:)

if anyone has a similer problem , i hope this answer will help .. cheers

Answer 3

function functionName(){
            $http.get(URL).success(function(response){

                $scope.variable = response;
            })
        }

inside get() put your url, if your url returning any data then it will go to success() function.