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>

Have you tried anything? Please include your code in your question. — rgthree
– rgthree, Commented Oct 14, 2016 at 13:39
I believe $http will look at the response headers. If it's not json then it won't attempt to parse it. I haven't verified this yet. I think that you'll have to deal with HTML encoding when you try to display your posts on the page. — Zach
– Zach, Commented Oct 14, 2016 at 13:50
Using a get request, you can retrieve any type of data you want, you can also load a totally new HTML in your current page. So yes, you can. However, you'll need to parse him or use him in another way, like loading HTML in a balise — Aks
– Aks, Commented Oct 14, 2016 at 13:54

Valter · Accepted Answer · 2016-10-14 14:26:57Z

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(){...});

answered Oct 14, 2016 at 14:26

Valter

2,8995 gold badges33 silver badges51 bronze badges

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

Comments

itsMe · Accepted Answer · 2016-10-17 13:50:09Z

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

Sangram Badi · Accepted Answer · 2016-10-14 14:38:49Z

0

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.

answered Oct 14, 2016 at 14:38

Sangram Badi

4,30412 gold badges50 silver badges86 bronze badges

7 Comments

Sangram Badi Over a year ago

have you inject $http

itsMe Over a year ago

yes i did ,i can recive data if i have a ´.json´ file in the local.

Sangram Badi Over a year ago

are you using restfull service ?

itsMe Over a year ago

but i want to take the data from remote server

itsMe Over a year ago

yeah , it should . may be i have done something wrong. need to rewrite it again .

|

Collectives™ on Stack Overflow

Angularjs - Displaying data using $http get from remote server

3 Answers 3

Comments

Comments

7 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

7 Comments

Your Answer

Sign up or log in

Post as a guest

Related