0

Tengo una simple página web cuyo frontend esta en AngularJS y el backend en Laravel. Al ir a una URL se ejecuta el siguiente código:

'use strict';

function FamiliaCtrl($scope, $rootScope, $window, API_CONFIG, $http, $stateParams, $location, ngDialog){
    var user = angular.fromJson($window.multipleStorage().getItem('usuario'));

    $scope.familias = [];

    $scope.error = $rootScope.error;


    function getFamilias(){
        $http.get(API_CONFIG.url + '/familias/listar').then(
            function (response) {
                if (response.status > 199 && response.status < 300) {
                    $scope.familias = response.data;
                    console.log($scope.familias);
                } else {
                    $scope.error.show = true;
                    $scope.error.message = response.data.error;
                }
            }
        );
    }

    let init = function(){
        switch($stateParams.accionFamilia){
            case 'listar':
                
                    getFamilias();
                    console.log($scope.familias);
                break;
            case 'crear':
                console.log('crear');
                break;
        }
    }

    init();
}

angular
  .module('urbanApp')
  .controller('FamiliaCtrl', ['$scope', '$rootScope', '$window', 'API_CONFIG', '$http', '$stateParams', '$location', 'ngDialog', FamiliaCtrl]);

Yo hago una llamada al servidor para obtener las familias, las cuales muestro en la vista de la siguiente manera:

<table class="table table-hover mb0" ng-show="!paginator.loading">
                                <thead>
                                    <tr>
                                        <th class="titulo-table col-md-1" ng-if="isTenant('Contreras')">{{'ID' | translate}}</th>
                                        <th class="titulo-table col-md-8" ng-if="isTenant('Contreras')">{{'Nombre' | translate}}</th>
                                        <th class="titulo-table col-md-3" ng-if="isTenant('Contreras')">{{'Código' | translate}}</th>
                                    </tr>
                                </thead>
                                <tbody>
                                    <tr style="cursor: pointer;" class="familia-selection" ng-repeat="familia in familias">
                                        <td  ui-sref="app.familias.detalle({id:familia.id})"  ng-if="isTenant('Contreras')">{{familia.id}}</td>
                                        <td  ui-sref="app.familias.detalle({id:familia.id})" ng-if="isTenant('Contreras')">{{familia.nombre}}</td>
                                        <td  ui-sref="app.familias.detalle({id:familia.id})" ng-if="isTenant('Contreras') && familia.codigo != ''">{{familia.codigo}}</td>
                                        <td  ui-sref="app.familias.detalle({id:familia.id})" ng-if="isTenant('Contreras') && familia.codigo == ''">{{'Sin código'}}</td>
                                    </tr>
                                </tbody>
                            </table>

Y las familias se ven correctamente. Mi pregunta es, por qué el console log de la línea 16 muestra $scope.familias bien pero el segundo console log (línea 41) muestra el array vacío? introducir la descripción de la imagen aquí

No debería quedarse guardado en el scope el array?

1 respuesta 1

0

Lo que hace es un petición como te muestra acá

$http.get(API_CONFIG.url + '/familias/listar')

Lo que debes entender es que esto es asincronomo, es decir que va a tomar un tiempo en responder, es por esta razón que al principio la función init imprime el valor en blanco pues así está inicialmente $scope.familias = [];.

    let init = function(){
        switch($stateParams.accionFamilia){
            case 'listar':
                
                    getFamilias();
                    console.log($scope.familias);
                break;
            case 'crear':
                console.log('crear');
                break;
        }
    }

    init();

Posteriormente cuando la petición es resuelta imprime el valor dentro del then.

$http.get(API_CONFIG.url + '/familias/listar').then(
            function (response) {
                if (response.status > 199 && response.status < 300) {
                    $scope.familias = response.data;
                    console.log($scope.familias);
                } else {
                    $scope.error.show = true;
                    $scope.error.message = response.data.error;
                }
            }
        );

Y está ingresando en este if

if (response.status > 199 && response.status < 300) {
    $scope.familias = response.data;
    console.log($scope.familias);// aca ya tienes los datos de tu back
}

Tu petición no esta manejando los errores

Ej:

$http.get('/someUrl', config).then(successCallback, errorCallback);

De la misma forma tienes otros métodos en $http.

$http.get
$http.head
$http.post
$http.put
$http.delete
$http.jsonp
$http.patch

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.