Return JSON Function Data and Populate DIV

Question

I want to learn how to recover the data from a function that does a GET in an API and returns me the JSON. I want to recover the data and fill in a list... with the ng-repeat.

Is going to come Undefined and then I don’t even know what to put on ng-repeat.

Angular JS

/* Factory */
App.factory('dealerFactory', ['$http', function($http) {
   var factory = {
      obterDados: _obterDados
   }

   // Lista de Concessionárias
   function _obterDados() {
      $http.get("http://localhost:8888/dealers").then(
         function(response){
            return response.data;
         }
      );
   }

   return factory;
}]);

App.controller('ListaCtrl', ['$scope', 'dealerFactory', function($scope, dealerFactory){

   $scope.dealers = [];
   $scope.dealers = dealerFactory.obterDados();

}]);

HTML

<ion-content ng-controller="ListaCtrl">
   <ion-list>
      <ion-item ng-repeat="{{ result in dealers }}" id="{{result.id}}">
         <h3>{{result.dealer}}</h3>
         <h4>{{result.stars}}</h4>
      </ion-item>
   </ion-list>
</ion-content>

Updating:

When I do the code below just for debug reasons, it returns Undefined. The URL is right, it is bringing json. I tested the LINK in the browser and also gave console.log in function Return and brought me the data.

$scope.dealers = [];
$scope.dealers = dealerFactory.obterDados();
console.log($scope.dealers);

I believe it is something related to Asynchronization. The variable has not changed yet and the Return is executed first... I don’t know how to fix.

Answer 1

Well, first create the variable in the angular scope,

App.controller('ListaCtrl', ['$scope', 'dealerFactory', 
 function($scope,    dealerFactory){

$scope.dealers = [];
$scope.dealers = dealerFactory.obterDados();

// não precisa fazer mais nada
}]);

HTML

<ion-content ng-controller="ListaCtrl">
//correção nova aqui
 <ion-list ng-repeat="dealer in dealers">
   <ion-item id="{{dealer.id}}">
      <h3>{{dealer.dealer}}</h3>
      <h4>{{dealer.stars}}</h4>
   </ion-item>
 </ion-list>
</ion-content>

CORRECTION:

 App.factory('dealerFactory', ['$http', function($http) {
   var factory = {
    obterDados: _obterDados
   }

function _obterDados() {
   $http.get("http://localhost:8888/dealers/1").then(
     function(data){
//como voce usou o then e não o sucess o data que tem o json esta dentro de
//data.data e não somente data
//se voce usa o .sucess ao invés do .then, usa apenas data no retorno
        return data.data;
      }
   );
 }

   return factory;
}]);

I believe this solves your problem, now you need to see if your API is actually returning the data, because you said that sometimes it returns Undefined, maybe the API is having some problem.

Anything please let me know,

I hope I’ve helped

Hugs!