How to create a jquery object and insert it into mongodb via ajax?

Question

I have the following structure in 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>

I can get the value of all the fields with the javascript. I can also separate the values of inputs day, beginning and end, for each of the forms. But I would like to build a structure like this:

{
"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"
                      }],
   }]
}

Then send via $.ajax() and with the PHP insert into a collection in the mongodb.

How do I mount this object? I reinforce that my doubt is not as send via ajax and insert in mongodb. Just how I build this object.

After help, I was able to develop the following code:

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(),
                        }]
                }]

        });
    }
});

But it returns only the value for the first line.

Answer 1

I believe that is what you want. To make a loop for forms and create the object with the arrays by inserting the values of the fields:

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>