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.