Solucionado (ver solução)
Solucionado
(ver solução)
17
respostas

Inserindo Array dentro de outro Array

Pessoal, estou tentando inserir um array dentro de um outro array em um escopo mas quando eu insiro ele coloca como se fosse um único item. O meu projeto estou inserindo um evento à um ticket com os seus anexos, e dentro de cada anexo existe o objeto arquivo. Podem me ajudar? Segue abaixo código:

$scope.addEvento = function () {
 var anexados = ["file1.jpg" , "file2.jpg"];

 var evento =
        {
          'descricao': this.evento.descricao,
          'status': this.evento.status,
          'analista': this.evento.analista,
          'anexo': [{arquivo : anexados}]
          }

 $scope.ticket.evento.push(evento);

};

quando eu executo a função addEvento ele adiciona tudo normal, porém o anexo como se fosse um arquivo com todos os valores do array anexados.

17 respostas

Poste o código completo do controller. Só para eu me situar, você tem experiência com JavaScript? Consegue fazer um exemplo sem Angular do que você quer fazer? Aliás faça um exemplo simples em Js para que eu consiga testar mais facilmente seu código.

Aguardo seu retorno.

Flavio, o meu conhecimento dentro de JS é o que eu aprendi dentro do alura. Na verdade o código é bastante extenso.

Eu mudei o array para um valor fixo para poder simplificar, pois o modelo do aplicativo funciona da seguinte maneira:

1- Cria-se um ticket com um titulo, descrição, quem é o responsável e a data de conclusão.

2- Depois é possível adicionar novos eventos ao ticket e com isso também inserir anexos dentro do evento que foi adicionado, porém a ideia era incluir tudo no mesmo push.

Nisso é que eu estou travado. Já consegui configurar o upload do arquivo, e inserir em um array os nomes dos arquivos salvos no servidor.

Porém quando vou adicionar os arquivos no anexo dentro do evento, ele insere como somente uma string.

Segue link da pasta do projeto

https://drive.google.com/open?id=0B_wXTfbctfmJV3NnMDRFbGhUUDA

Se precisar, consigo deixar a aplicação rodando aqui e passar o link para testar

Thadeu, a ideia é que você compartilhe o código completo do seu controller. O projeto inteiro não ajuda, porque eu teria que descompactar, subir o projeto e tals. Você tem ele no git? Me envia o link do arquivo apenas.

Se não tiver, cole apenas o código do controller em questão, completo, não apenas essa parte que você colou.

Aguardo o código.

OBS: é que não entendo ele como esta, evento adicionando evento nele mesmo, talvez sejam os nomes das variáveis que não ajudam. Por isso o código completo do controller ajuda. Tem é ticket? Quem você esta referenciando usando this?

Eu entendi seu código assim. Fiz um teste em JavaScript puro, você pode testá-lo em jsbin.com:


// Ticket possui eventos
var ticket = {
  eventos: []
};

// um evento pode ter arquivos anexados
var arquivos = ["file1.jpg" , "file2.jpg"];

// criando um evento, já com os arquivos anexados

var evento = {
          'descricao': 'XXX',
          'status': 'XXXX',
          'analista': 'XXXX',
          'anexos': arquivos
          };

// adicionando um evento na lista
ticket.eventos.push(evento);

// pegando o primeiro evento da lista de eventos e vendo seus anexos
console.log(ticket.eventos[0].anexos);

É isso que você quer? Rode o teste! Eu mudei os nomes das variáveis para conseguir entender melhor o seu problema.

Deixando mais perto do seu código original, veja se é isso que você quer:

// Ticket possui eventos
var ticket = {
  eventos: []
};

// um evento pode ter arquivos anexados
var meusArquivos = ["file1.jpg" , "file2.jpg"];

// criando um evento, já com os arquivos anexados

var evento = {
          'descricao': 'XXX',
          'status': 'XXXX',
          'analista': 'XXXX',
          'anexos': { arquivos: meusArquivos}
          };

// adicionando um evento na lista
ticket.eventos.push(evento);

// pegando o primeiro evento da lista de eventos e vendo seus anexos
console.log(ticket.eventos[0].anexos.arquivos);

To achando que sua dúvida é como ler, e não como gravar.

Aguardo seu feedback! Legal você começar do zero conosco e chegar até a MEAN Stack para criar uma aplicação. Parabéns!

Flavio, é bem essa a ideia que eu estou precisando, porém quando eu faço

'anexos': { arquivos: meusArquivos}

ele insere os meus arquivos como um unico valor, não como um array.

O que eu precisava é como se fosse de resultado dentro de anexos:


    anexo : [{
        arquivo : file1.jpg,
        arquivo, : file2.jpg
    }]

O objetivo que eu estou almejando é inserir um array de arquivos dentro de anexo antes de realizar o push para que quando fossem listados, eu consigo puxar cada arquivo separadamente e quando eu faço desse jeito ele me retorna somente um objeto no caso

anexo: [{
    arquivo : 'file1.jpg,file2.jpg'
    }]

Obrigado Flavio, o bom é que eu sempre tive ideias, porém sem saber como converter em aplicações funcionais, e agora já estou conseguindo entender bastante; até mesmo para pesquisar em fóruns e documentações, já consegui resolver bastante coisa do que eu fiz além dos cursos em outros lugares, mas esta eu não achei em nenhum lugar uma solução que eu pudesse compreender.

Quando ele diz que insere como um único valor, que valor é esse? Eu mostrei a prova de conceito em JavaScript puro, deveria funcionar em Angular.

Então, cole o código do controller aqui para eu dar uma olhada. Você viu que funciona :)

Ele insere um único valor com todo o conteúdo do array e não um arquivo para cada valor do array.

angular.module('ticketapp')

  .controller('TicketController', function ($scope, $routeParams, $resource, $filter, $location, $route, AnexoInsert, $rootScope) {

    var Ticket = $resource('v1/tickets/:id');

    if ($routeParams.ticketId) {
      Ticket.get({ id: $routeParams.ticketId },
        function (ticket) {
          $scope.ticket = ticket;
          console.log(ticket);
        },
        function (erro) {
          $scope.mensagem = {
            texto: 'Não foi possivel abrir o ticket'
          };
          console.log(erro);
        }
      );
    }
    else {
      $scope.ticket = {};
    }


    $scope.salva = function () {

      $scope.ticket.$save()
        .then(function () {
          $scope.mensagem = { texto: 'Salvo' };
        })
        .catch(function (erro) {
          $scope.mensagem = { texto: 'erro' };
        });

    };

    $scope.ticket = new Ticket();



    $scope.addEvento = function () {
      var lista = ["file1.jpg" , "file2.jpg"];
      // lista = AnexoInsert.getAnexos();

      var evento =
        {
          'descricao': this.evento.descricao,
          'status': this.evento.status,
          'analista': this.evento.analista,
          'anexo': { arquivo: lista }
        }


      $scope.ticket.evento.push(evento);
      this.salva();
      this.evento = {};
      $route.reload();
    };


    //Desativa botão Enviar se o status estiver finalizado
    $scope.finalizado = function () {
      var status = $('#estado').text();
      if (status == 'Finalizado') {
        return true;
      }
    };

    //Formato de Data do PickDate
    $scope.myDate = new Date();
    $scope.ModifiedDate = $filter("date")(Date.now(), 'dd-MM-yyyy');





  });

E esse é o retorno do mongo

  "evento" : [
     {
                        "analista" : "Thadeu Cotts",
                        "status" : "Em tratamento",
                        "descricao" : "Testando",
                        "_id" : ObjectId("578400919e33f9901147076f"),
                        "anexo" : [
                                {
                                        "arquivo" : "file1.jpg,file2.jpg",
                                        "_id" : ObjectId("578400919e33f99011470770")
                                }
                        ],
                        "data" : ISODate("2016-07-11T20:24:49.486Z")
                }
}
solução!

Ah, então seu problema não é em Javascript, é no lado do mongoDb! Isso muda a coisa totalmente! Os dados saem do seu client, vai para o server, o server recebe e depois passa para o mondo gravar. Zilhões de coisas podem ter acontecido nesse momento.

Você vai fazer:

 $scope.ticket.evento.push(evento);
console.log( $scope.ticket.evento);

Veja no console do Browser como esta sendo exibida na lista, se esta do jeito que você quer.

Depois, vá na API do seu servidor e faça a mesma coisa. Se no lado do Angular estiver tudo OK, deve ser problema na criação do esquema com Mongoose!

Como você criou o esquema de um Ticket com Mongoose? Cole seu código aqui.

Geralmente, fica complicado ajudar projetos pessoais, mas no seu caso, pode ser problema no esquema.

MAS não esquece de fazer o teste do console log que pedi e o resultado aqui.

Flavio, se eu fizesse assim :

 $scope.addEvento = function () {
      var lista = ["file1.jpg" , "file2.jpg"];
      // lista = AnexoInsert.getAnexos();

      var evento =
        {
          'descricao': this.evento.descricao,
          'status': this.evento.status,
          'analista': this.evento.analista,
          'anexo': [{ arquivo: lista[0], arquivo: lista[1] }]
        }


      $scope.ticket.evento.push(evento);
      this.salva();
      this.evento = {};
      $route.reload();
    };

Ai ele consegue salvar normalmente.

 {
                        "analista" : "Thadeu Cotts",
                        "status" : "Em tratamento",
                        "descricao" : "teste array",
                        "_id" : ObjectId("57840894b11139e419af0716"),
                        "anexo" : [
                                {
                                        "arquivo" : "file1.jpg",
                                        "_id" : ObjectId("57840894b11139e419af0718")
                                },
                                {
                                        "arquivo" : "file2.jpg",
                                        "_id" : ObjectId("57840894b11139e419af0717")
                                }
                        ],
                        "data" : ISODate("2016-07-11T20:59:00.503Z")
                }

meu Schema do mongoose está

var schema = mongoose.Schema({
    // _id : {type: ShortId, len: 6, base: 10, seq: 0},
    owner : {type: String},
    criacao: {type: Date, default: Date.now},
    atividade: {type: String},
    previsao: {type: Date},
    evento : [{
      analista: {type: String},
      status: {type: String},
      descricao: {type: String},
      data: {type: Date, default: Date.now},
      anexo : [{arquivo : {type: String}}]
    }]

  });

Flavio, se eu fizesse assim :

 $scope.addEvento = function () {
      var lista = ["file1.jpg" , "file2.jpg"];
      // lista = AnexoInsert.getAnexos();

      var evento =
        {
          'descricao': this.evento.descricao,
          'status': this.evento.status,
          'analista': this.evento.analista,
          'anexo': [{ arquivo: lista[0], arquivo: lista[1] }]
        }


      $scope.ticket.evento.push(evento);
      this.salva();
      this.evento = {};
      $route.reload();
    };

Ai ele consegue salvar normalmente.

 {
                        "analista" : "Thadeu Cotts",
                        "status" : "Em tratamento",
                        "descricao" : "teste array",
                        "_id" : ObjectId("57840894b11139e419af0716"),
                        "anexo" : [
                                {
                                        "arquivo" : "file1.jpg",
                                        "_id" : ObjectId("57840894b11139e419af0718")
                                },
                                {
                                        "arquivo" : "file2.jpg",
                                        "_id" : ObjectId("57840894b11139e419af0717")
                                }
                        ],
                        "data" : ISODate("2016-07-11T20:59:00.503Z")
                }

Flávio, resolvi!!!!!

Muito obrigado por me atentar que poderia ser algo no mongoose. Fiquei imaginando que poderia ser algo no controller ou que eu deveria fazer uma função para ele percorrer, mas não.

Segue abaixo como ficou o código:

 var lista = [];
//lista recebe um array através de um serviço que puxa informação do UploadController
      lista = AnexoInsert.getAnexos();

      var evento =
        {
          'descricao': this.evento.descricao,
          'status': this.evento.status,
          'analista': this.evento.analista,
          'anexo': lista
        }
var schema = mongoose.Schema({
    owner : {type: String},
    criacao: {type: Date, default: Date.now},
    atividade: {type: String},
    previsao: {type: Date},
    evento : [{
      analista: {type: String},
      status: {type: String},
      descricao: {type: String},
      data: {type: Date, default: Date.now},
      anexo : {type : Array }
    }]

O resultado ficou assim!

{
                        "analista" : "Thadeu Cotts",
                        "status" : "Em tratamento",
                        "descricao" : "teste funcional",
                        "_id" : ObjectId("57841c792782598426b75e30"),
                        "anexo" : [
                                "file-1468275826962.jpg",
                                "file-1468275826947.jpg",
                                "file-1468275826956.jpg",
                                "file-1468275826966.jpg"
                        ],
                        "data" : ISODate("2016-07-11T22:23:53.454Z")
                }

Matou a charada!

anexo : {type : Array }

Era o tipo de mapeamento!

Muito obrigado pelo apoio!!

Quer mergulhar em tecnologia e aprendizagem?

Receba a newsletter que o nosso CEO escreve pessoalmente, com insights do mercado de trabalho, ciência e desenvolvimento de software