gourab alam gourab alam - 1 month ago 10
HTTP Question

Angularjs - Displaying data using $http get from remote server

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

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