Solucionado (ver solução)
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.