1

Tenho a seguinte estrutura em html:

<form id="titulo">
 <input type="text" name="nome">
</form>
<form id="turno1">
 <div class="linha">
  <input type="text" name="dia">
  <input type="text" name="inicio">
  <input type="text" name="fim">
 </div>
 <div class="linha>
  <input type="text" name="dia">
  <input type="text" name="inicio">
  <input type="text" name="fim">
 </div>
</form>
<form id="turno2">
 <div class="linha">
  <input type="text" name="dia">
  <input type="text" name="inicio">
  <input type="text" name="fim">
 </div>
 <div class="linha>
  <input type="text" name="dia">
  <input type="text" name="inicio">
  <input type="text" name="fim">
 </div>
</form>

Eu consigo pegar o valor de todos os campos com o javascript. Também consigo separar certinho os valores dos inputs dia, inicio e fim, referente a cada um dos formulários. Porém, eu gostaria de construir uma estrutura como esta:

{
"nome" : [{
  "turno1" : [{
              "dia" : [{
                        "inicio" = "valor_inicio",
                        "fim" = "valor_fim"
                      }],
              "dia" : [{
                        "inicio" = "valor_inicio",
                        "fim" = "valor_fim"
                      }],
   }],

   "turno2" : [{
               "dia" : [{
                        "inicio" = "valor_inicio",
                        "fim" = "valor_fim"
                       }],
              "dia" : [{
                        "inicio" = "valor_inicio",
                        "fim" = "valor_fim"
                      }],
   }]
}

Depois enviar via $.ajax() e com o PHP inserir em uma collection no mongodb.

Como eu monto este objeto? Reforço que a minha dúvida não é como enviar via ajax e inserir no mongodb. Somente como eu construo este objeto.

Após ajuda, consegui desenvolver o seguinte código:

var obj = {};
$("form").each(function (i) {
    if (i == 0) {
        form1 = $("[titulo='Nome']", $(this)).val();
        obj[form1] = [{}];
    } else {
        formulario = $(this).attr("id");
        linha = "#" + formulario + " .linha";
        $(linha).each(function () {
            obj[form1][0][formulario] = [{
                    [$("[name='dia']", $(this)).val()]: [{
                            "inicio": $("[name='inicio']", $(this)).val(),
                            "fim": $("[name='fim']", $(this)).val(),
                        }]
                }]

        });
    }
});

Porém ele retorna somente o valor referente à primeira linha.

2
  • A chave "dia" deve ser o valor do campo name="dia" ou simplesmente a string dia, mesmo?
    – Phiter
    Commented 29/03/2018 às 18:43
  • Neste caso o valor do campo. Commented 29/03/2018 às 19:08

1 Resposta 1

0

Creio que seja isso que deseja. Fazer um loop pelos forms e criar o objeto com as arrays inserindo os valores dos campos:

var obj = {};

$("form").each(function(i){
   
   var $this = $(this);
   
   if(i == 0){

      form1 = $("[name='nome']", $(this)).val();
      obj[form1] = [{}];

   }else{
      
      obj[form1][0][$this.attr("id")] = [{}];

      $(".linha", $this).each(function(){
      
         obj[form1][0][$this.attr("id")][0][$("[name='dia']", $(this)).val()] = [{
      
               "inicio" : $("[name='inicio']", $(this)).val(),
               "fim" : $("[name='fim']", $(this)).val(),
         
         }]
      });
   }
   
});

console.log(obj);
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form id="titulo">
   <input type="text" name="nome" value="Fulano">
</form>

<form id="turno1">
   <div class="linha">
      <input type="text" name="dia" value="t1 d1">
      <input type="text" name="inicio" value="t1 ini1">
      <input type="text" name="fim" value="t1 fim1">
   </div>
   <div class="linha">
      <input type="text" name="dia" value="t1 d2">
      <input type="text" name="inicio" value="t1 ini2">
      <input type="text" name="fim" value="t1 fim2">
   </div>
</form>

<form id="turno2">
   <div class="linha">
      <input type="text" name="dia" value="t2 d1">
      <input type="text" name="inicio" value="t2 ini1">
      <input type="text" name="fim" value="t2 fim1">
   </div>
   <div class="linha">
      <input type="text" name="dia" value="t2 d2">
      <input type="text" name="inicio" value="t2 ini2">
      <input type="text" name="fim" value="t2 fim2">
   </div>
</form>

8
  • Cara funcionou perfeitamente! Mas acabei cometendo um erro. Cada um dos formulários possuem mais de uma linha, sendo que cada linha possui os 3 campos: dia, inicio e fim. Editei minha pergunta para verificar se pode me ajudar com mais este detalhe. Commented 30/03/2018 às 1:09
  • Qual foi o erro?
    – Sam
    Commented 30/03/2018 às 1:10
  • Eu alterei a pergunta corrigindo meu erro. Commented 30/03/2018 às 1:14
  • ok.. vou dar uma olhada e atualizar a resposta
    – Sam
    Commented 30/03/2018 às 1:15
  • Resposta atualizada.
    – Sam
    Commented 30/03/2018 às 1:39

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 .