CODEWITHSUNDEEP
angularjsjsonionic-framework
Rudhra
Rudhra

Reputation: 123

How to display the data using $http.get

In my app Im trying to fetch the json array from the DB using the $http.get, on execution Im not able see the fetched data on my view. But in my browser console Im able to see the response showing number of json array data:array[5]on expanding each array able to see the entered values in the array. So how can I display the data fetched in my view page.

 var brandList=[];
var successCallBack=function(response){
  $log.info(response);
  brandList=response;
};
 var errorCallBack=function(response)
 {
   $log.info(response);
 };
$http({
  method:'get',
  url:'http://local-serve:8081/route/listMake'})
  .then(successCallBack,errorCallBack);  
      return brandList;
}]);

Upvotes: 3

Views: 6184

Answers (3)

Fernando Del Olmo
Fernando Del Olmo

Reputation: 1450

when you use $http methods keep in mind all are async, so you must do something like this:

function dataService ($http, $q) {  
    return {
        getAll: getAll
    }

    function getAll () {
        var defered = $q.defer();
        var promise = defered.promise;

        $http.get('my-url')
            .success(function(data) {
                defered.resolve(data);
            })
            .error(function(err) {
                defered.reject(err)
            });

        return promise;
    }
}

Now you can handle the result as you wish:

function myController (dataService) {  
    dataService
        .getAll()
        .then(function(data) {
            $scope.elementos = data;
        })
        .catch(function(err)) {
            //Error
        }
}

Upvotes: 0

Anil Kumar Ram
Anil Kumar Ram

Reputation: 1221

Check the snippet below..

function myCtrl($scope, $http) {
  $http.get('http://www.w3schools.com/angular/customers.php')
   .then(function(response){
     $scope.names = response.data.records;
   })
}
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app ng-controller="myCtrl">
    <ul>
    <li ng-repeat="x in names">{{x.Country}}</li>
  </ul>
</div>

Upvotes: 0

sisyphus
sisyphus

Reputation: 462

The response in the entire response object. you need to extract value from it. Try running this URL in the browser. Now using the same URL, here's an example:

In JS,

$http.get('https://jsonplaceholder.typicode.com/photos/1')
   .then(function(response){
     $scope.title = response.data.title;
   })

And in HTML,

<p>
 The title is <i>{{title}}</i>
</p>

Upvotes: 1

Related Questions