3

Estou começando a estudar angular mais a fundo, e estou tendo problemas ao processar dados JSON em uma factory e passá-los para um controller.

Minha ideia é: Um app simples, apenas para estudo, onde eu digito a capital e ele me retorna o estado. Simples, não?

Meu JSON está assim:

[
{ "state": "Rio Grande do Sul", "capital": "Porto Alegre " },
{ "state": "Santa Catarina", "capital": "Florianópolis" },
{ "state": "Paraná", "capital": "Curitiba" },
{ "state": "São Paulo", "capital": "São Paulo" },
{ "state": "Rio de Janeiro", "capital": "Rio de Janeiro" },
{ "state": "Minas Gerais", "capital": "Belo Horizonte" },
{ "state": "Espirito Santo", "capital": "Vitória" } ]

Minha factory:

angular.module('appUi')

.factory('CidadeService', ['$http', function($http) {
var vm = this;

var estados = {}

var dados  = [];
var teste = 4;
vm.dados = [];

return { 
    retornaDados : function() { 
        return $http({
            url: '../dados.json',
            method: 'GET'
    })
        .then(function(data) {
        vm.data = data;
        return vm.data;
    })
    }

}
}])

Meu controller:

.controller('CidadeCtrl', ['$scope','$http','CidadeService', function($scope, $http, CidadeService){

var vm = this;
var enteredcapitalCtrl = null;
vm.enteredcapitalShow = null;
vm.dados = {};

$scope.$watch('enteredcapital', function(enteredcapital) {
        enteredcapitalCtrl = enteredcapital;
});

vm.showState = function() {
    vm.dados = CidadeService.retornaDados();
console.log(vm.dados);
    vm.enteredcapitalShow = enteredcapitalCtrl;
}
}]) 

E meu html:

<form action="" ng-submit="cidade.showState()">
    <fieldset>
        <label for="input-cidade" >Digite o nome de uma capital:</label>
        <input type="text" ng-model="enteredcapital">
        <input type="submit" value="Ok">

        <p>O estado é: {{ '''AQUI VIRÁ O ESTADO''' }}</p>
    </fieldset>
</form>

A lógica é simples (eu acho), a função retornaDados, que está no scope da factory retorna os objetos vindos do JSON pelo GET, e no meu controller, eu vou pegar a cidade, e retornar no meu array de objetos qual o estado relativo a capital.

Meus problemas:

1- O que eu retorno no console.log(vm.dados) no controller é o seguinte:

$$state: Object
status: 1
value: Object
config: Object
data: Array[7]
0: Object
capital: "Porto Alegre "
state: "Rio Grande do Sul"
__proto__: Object
1: Object
2: Object 
3: Object 
4: Object 
5: Object 
6: Object
 length: 7 
__proto__:  
array[0]
headers: (c)
 status: 200 
statusText: "OK"
 __proto__: Object 
__proto__: Object
 __proto__: d

E eu deveria retornar apenas o array de objetos, porque está acontecendo isso?

2- Com o array correto retornado, como eu vou fazer essa busca nos objetos? O underscore pode me ajudar? Não consegui encontrar nenhuma função que auxilie com isso.

1 Resposta 1

4

Primeira coisa, quando você faz um request $http, você está trabalhando Assyncronamente, o que quer dizer que sua função.

retornaDados : function() { 
    return $http({
        url: '../dados.json',
        method: 'GET'
})
    .then(function(data) {
    vm.data = data;
    return vm.data;
})
}

é Assyncrona, logo quando você chama o retornaDados, ele está te retornando a função e não o resultado da mesma, para deixar o mesmo "Sincrono" é necessário implementar uma PROMESSE, "$q" ou seja uma promessa de retorno. seu código ficaria da seguinte forma.

   retornaDados : function() { 

        var deffered = $q.defer();
        $http({ url: '../dados.json', method: 'GET'})
          .then(function(response) {
             deffered.resolve(response.data);
          })

        return deffered.promise;
   }

Lembrando que quando você faz uma request $http, passando um JSON de configuração seu retorno é um objeto (response) com os as propriedades Data, Status, etc.

mais na ref. https://docs.angularjs.org/api/ng/service/$http

A chamada desse método ficaria da seguinte forma.

    vm.showState = function() {
        CidadeService.retornaDados().then(function(retorno){
          console.log(retorno); // no retorno você vai ter o que veio do $http

          //vm.enteredcapitalShow = enteredcapitalCtrl;
    });
}

Agora com o array correto, precisa ver o que você precisa fazer .. você pode preencher uma variavel e utilizar o ng-repeat, em um Options de um selectBox para exibir ou jogar em um grid, depende da sua necessidade.

2
  • Entendi! Muito boa a explicação, realmente não tinha me atentado a esses detalhes.Obrigado
    – CarvBru
    9/09/2015 às 12:24
  • rsrs, sem problemas, qualquer dúvida estou a disposição @CarvBru 9/09/2015 às 13:02

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .