Solucionado (ver solução)

Importante

Você está vendo a versão anterior da nova experiência da Alura que estamos preparando para você. Em breve, ela ganha uma identidade visual novinha totalmente pensada em potencializar seus estudos!

Solucionado
(ver solução)
15
respostas

Duvida sobre como utilizar o query do $resource.

Estou criando uma aplicação para praticar o que aprendi nos cursos de MEAN STACK e ANGULAR do professor Flávio henrique. Porém me deparei com um problema.

Estou salvado com sucesso essa estrutura no mongoDB

´´´ {
        "_id" : ObjectId("58bc48821b4314641915313f"),
        "dataEvento" : ISODate("2013-07-07T03:00:00Z"),
        "eventos" : [
                {
                        "nickPlayer" : "1",
                        "printUrl" : "1",
                        "nomeEvento" : "1",
                        "premiacao" : 1,
                        "_id" : ObjectId("58bc48821b43146419153140")
                }
        ],
        "__v" : 0
}
{
        "_id" : ObjectId("58bc56f81b43146419153141"),
        "dataEvento" : ISODate("0888-08-08T03:00:00Z"),
        "eventos" : [
                {
                        "nickPlayer" : "1",
                        "printUrl" : "1",
                        "nomeEvento" : "2",
                        "premiacao" : 22,
                        "_id" : ObjectId("58bc56f81b43146419153142")
                }
        ],
        "__v" : 0
}

´´´

É uma lista de eventos, onde cada lista de eventos tem um array com diversos eventos e suas informações pertinentes, e temos também as informações da lista de eventos, como data e outras que pretendo colocar depois.

O problema é que quando eu tento recuperar essa "listaEventos" através de um service que usa o método query do $resource angular, eu não consigo ligar diretamente com a minha view. Eu queria fazer a query nessa lista eventos, e na resposta da query já declarar isso.

angular.module('painelGm')
    .controller('listaEventosController', function($scope, $routeParams, eventosServices){

        $scope.listaEventos = [];

        eventosServices.query(function(listaEventos){
                $scope.listaEventos = listaEventos;
                console.log(listaEventos);

        }, function(error){
            console.log(error);
        });

    });

Porém esse "listaEventos" não é um objeto javascript (eu acho), não entendi essa estrutura. Pois eu já tenho na minha view uma ligação com $scope.listaEventos mas não consigo acessar as propriedades deste objeto, nem os array que tem dentro dele.

Código da minha view

<div class="col-ls-8 col-md-8 col-ls-offset-1 col-md-offset-1 col-xs-8">
    <table class="table table-bordered table-hover">
        <thead>
            <tr>
            <th>Nick do player</th>
              <th>Nome do evento</th>
              <th>Premiação</th>
            </tr>
        </thead>
        <tbody>
            <tr ng-repeat="evento in listaEventos.eventos track by $index">
                <td>{{evento.nickPlayer}</td>
                <td>{{evento.nomeEvento}}</td>
                <td>{{evento.premiacao}}</td>
            </tr>
        </tbody>
    </table>
</div>

Fico grato pela atenção.

15 respostas

a impressão da listaEventos está mostrando o que?

Acredito que na print fica melhor de visualizar: http://prntscr.com/eghpxj

é... vc precisa dar uma olhada nesse eventosService, na função query, ela não está passando para o callback o objeto literal que vc espera não..

Dei uma olhada aqui e não consegui identificar.

angular.module('meusServicos', ['ngResource'])
    .factory('eventosServices', function($resource) {

        return $resource('/eventos/:listaEventoId', null, {
            'update' : { 
                method: 'PUT'
            }

Oi Douglas, se você acessar diretamente no browser o endereço /eventos a lista e eventos é devolvida? Tipo, algo como localhost:3000/eventos? Eu não vi sua pergunta antes, porque você postou em um grupo bem genérico e acabou passando desapercebido por mim.

Espera ai! O JSON que você retorna do banco é um objeto que tem a propriedade eventos? Se for, não pode simplesmente pegar o retorno e jogar no escopo do controller. Terá que fazer assim:

  eventosServices.query(function(retorno){
                $scope.listaEventos = retorno.eventos;
        }, function(error){
            console.log(error);
        });

Talvez esse seja o problema, meu aluno.

Bom dia,

Quando eu acesso a rota localhost:3000/eventos o que eu obtenho é exatamente o que eu cadastrei

[{"_id":"58bfff8add88a8c426d5029d","dataEvento":"2017-03-08T03:00:00.000Z","__v":0,"eventos":[{"nickPlayer":"FulanoBM","printUrl":"","nomeEvento":"Quiz","premiacao":5,"_id":"58bfff8add88a8c426d5029f"},{"nickPlayer":"CiclanoMG","nomeEvento":"Esconde-Esconde","premiacao":2,"printUrl":"1","_id":"58bfff8add88a8c426d5029e"}]}]

Mas no service, eu esperava obter esse objeto e acessar os o conteúdo dele pelo nome das propriedades, não é assim que funciona?

No caso você falou para chamar de "retorno" e então tentar acessar a propriedade "eventos" deste objeto, mas quando faço isso a resposta é : undefined

Isso é o que estou mandando no meu post do cadastro desse objeto listaEventos (com sucesso)

Print: http://prnt.sc/ehgic9

Agora se eu fizer assim no service meio que funciona.

    eventosServices.query(function(listaEventos){
        //        $scope.listaEventos = listaEventos.eventos;
                console.log(listaEventos[0].dataEvento);
                console.log(listaEventos[0].eventos);
                debugger;

        }, function(error){
            console.log(error);
        });

Não sei explicar o motivo, mas sei que neste caso no console do navegador ele printa exatamente o que eu esperava.

Print : http://prntscr.com/ehgmr6

Grato pela atenção.

Olá, então eu então compreendi a estrutura dos seus dados retornados. Com base no último dado que você me passou.

Você tem:

[{"_id":"58bfff8add88a8c426d5029d","dataEvento":"2017-03-08T03:00:00.000Z","__v":0,"eventos":[{"nickPlayer":"FulanoBM","printUrl":"","nomeEvento":"Quiz","premiacao":5,"_id":"58bfff8add88a8c426d5029f"},{"nickPlayer":"CiclanoMG","nomeEvento":"Esconde-Esconde","premiacao":2,"printUrl":"1","_id":"58bfff8add88a8c426d5029e"}]}]

É por isso que você teve que fazer:

  console.log(listaEventos[0].dataEvento);
                console.log(listaEventos[0].eventos);

Veja que você esta retornando uma lista de objetos e cada objeto possui a propriedade eventos. É isso que você quer mesmo?

Então, você tem uma lista dentro de uma lista. Meio confuso para mim. Entende o que eu quero dizer? Você não esta retornando para mim uma lista de eventos, esta retornando um objeto que possui uma lista e eventos.

Você tem que definir o que você quer retornar para o Angular, do jeito que esta, você receberá sim uma lista, mas dessa lista terá que acessar a priopriedade eventos de cada objeto.

Então, voltando para seu código original:

  eventosServices.query(function(listaEventos){
                $scope.listaEventos = listaEventos;
        }, function(error){
            console.log(error);
        });

$scope guarda uma lista. Mas se você usar o ng-repeat, essa lista te devolverá um objeto e para saber os eventos desse objeto terá que fazer .eventos.

Sim, a minha intenção é ter uma coleção o qual vai conter varias "listas de eventos", e cada "lista de evento" tem sua dataEvento e um array com os eventos daquele data.

E eu pensei que o query sempre me trazia um array com todos os objetos daquela rota, no meu caso a rota "eventos", o que confundiu acredito que seja o nome, eu escolhi um nome ruim, ja que na verdade é uma Objeto mais genérico que conterá todas as lista de eventos, e cada lista de evento terá seus eventos e data de realização dos eventos.

Resumindo, também fiquei confuso, não sei como obtenho o resultado que eu quero agora. Ficar acessando por posição de array não faz sentido pra mim, pois eu quero ter uma view listando por ng-repeat as informações de cada evento dentro de uma determinada "listaEvento".

Já tentou um ng-repeat dentro de um ng-repeat? Um para iterar na sua lista.. e outro para iterar na lista de eventos.

Com o tempo você vai lapidando. Acabei um projeto recentemente que no final tive que lapidar várias coisas. Algo bastante comum!

Tenta lá e nos dê um feedback.

O resultado eu queria algo deste tipo:

Print : http://prntscr.com/ehgyro

Porém ai é só uma lista de eventos, em cima data que foram feitos os eventos, e na table as informações de cada evento. Em seguida teria outra table com outra data e as informações da outra lista de eventos.

Não consegui entender como funciona o ng-repeat aninhado para a minha situação.

Meu código da view ficou assim.


<div class="col-ls-8 col-md-8 col-ls-offset-1 col-md-offset-1 col-xs-8">
    <table class="table table-bordered table-hover" ng-repeat="index in listaEventos.length">
        <thead>
            <tr>
            <th>Nick do player</th>
              <th>Nome do evento</th>
              <th>Premiação</th>
            </tr>
        </thead>
        <tbody>
            <tr ng-repeat="listaEventos[index].eventos in evento">
                <td>evento.nickPlayer}}</td>
                <td>evento.nomeEvento}}</td>
                <td>evento.premiacao}}</td>
            </tr>
        </tbody>
    </table>
</div>

Mas isso até erro no console deu

'_item_' in '_item_ in _collection_' should be an identifier or '(_key_, _value_)' expression, but got 'listaEventos[index].eventos'.

Sendo que em "index in listaEventos.length" eu ia obter o tamanho do array genérico, que tem todas as lista de eventos e suas data. Depois ia iterando em cada uma dessas lista de eventos, acessando o array "eventos" e colocando as informações na tabela.

solução!

Você usará ng-repeat para iterar em cada elemento da sua lista. Depois, fará outro ng-repeat que vai iterar na propriedade eventos.

Consegui!!, usando o ng-repeat da forma que falaste.

Porém gostaria de sintetizar algo conceitual, aquele retorno da forma que recebi do query, tem nome? aquilo é um json? mesmo tendo pendurado aquelas $promise $resolved e etc..? o que devo pesquisar para entender melhor essas estruturas?

Me refiro a este retorno, o bruto retorno do query: http://prnt.sc/eghpxj

E muito obrigado pela a atenção e pela paciência rsrs.

Abraço.

Opa! É json sim, masbum json arretado ;) cheio de coisas.

Sucesso e bom estudo meu aluno.