Tengo una etiqueta de entrada html como esta:

<form id="info">
    <input id="A" name="A" type="hidden" nodetye="parent" value="A">
    <input id="A1" name="A1" type="text" nodetype="child" value="a1val">
    <input id="A2" name="A2" type="text" nodetype="child" value="a2val">
    <input id="B" name="B" type="hidden" nodetye="parent" value="B">
    <input id="B1" name="B1" type="text" nodetye="child" value="B1">
    <input id="B2" name="B2" type="text" nodetye="child" value="B2">
<form>

Paso valor en jquery así:

function writeJSONfile() {
    var obj = {};
    $("form#info :input").each(function(){
        obj[this.id] = $(this).val();
    });
    var json = JSON.stringify(obj);
    alert("check"+json);
}

Resultado:

{"A":"A","A1":"a1val","A2":"a2val","B":"B","B1":"b1val","B2":"b2val"}

Pero mi resultado esperado es:

{"A":{"A1":"a1val","A2":"a2val"},"B":{"B1":"b1val","B2":"b2val"}}

Puedes leer JSON con json editor en línea. Gracias por adelantado

-1
C.Tin 2 mar. 2018 a las 09:36

6 respuestas

La mejor respuesta

El problema que enfrenta se produce porque no ha escrito código que distinga valores como 'A', 'B' de 'A1', 'B1' etc. Todo lo que necesita, para hacer que el código funcione es:

  • una variable que hace referencia al objeto al que se debe agregar la propiedad &
  • una simple comprobación if que dirigirá el flujo en consecuencia.

Fragmento:

/* ----- JavaScript ----- */
function writeJSONfile() {
  var
    /* Create an object. */
    obj = {},
    
    /* Create a variable that references the current object (default → obj). */
    ref = obj;
    
  /* Iterate over every input. */
  $("form#info :input").each(function() {
    /* Cache the id of the input. */
    var id = this.id;
    
    /* Check whether the nodetype attribute is set to 'parent'. */
    if (this.getAttribute("nodetype") == "parent") {
      /* Set a new object to the property and set ref to refer to it. */
      ref = obj[id] = {};
    }
    else {
      /* Set the value of the input to the referred object. */
      ref[id] = $(this).val();
    }
  });
  
  /* Stringify the object and return it. */
  return JSON.stringify(obj);
}

/* Create and log the result. */
console.log(writeJSONfile());
<!----- HTML ----->
<script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form id="info">
  <input id="A" name="A" type="hidden" nodetype="parent" value="A"/>
  <input id="A1" name="A1" type="text" nodetype="child" value="a1val"/>
  <input id="A2" name="A2" type="text" nodetype="child" value="a2val"/>
  <input id="B" name="B" type="hidden" nodetype="parent" value="B"/>
  <input id="B1" name="B1" type="text" nodetype="child" value="b1val"/>
  <input id="B2" name="B2" type="text" nodetype="child" value="b2val"/>
</form>
0
Angel Politis 2 mar. 2018 a las 07:07

Puede encontrar todas las entradas con nodetype parent y actualizar el objeto obj con su id como clave y {} como valor. Luego, recorra todos los elementos de entrada con nodetype como child y agregue toda la identificación como clave y valor como valor del cuadro de entrada en el objeto.

function writeJSONfile() {
  var obj = {};
  $('form#info :input[nodetype=parent]').each(function(){
    obj[this.id] = {};
  })
  $("form#info :input[nodetype=child]").each(function(){
    if(!(this.id[0] in obj))
      obj[this.id[0]] = {};
    obj[this.id[0]][this.id] = $(this).val();
  });
  var json = JSON.stringify(obj);
  console.log(json);
}
writeJSONfile();
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form id="info">
  <input id="A" name="A" type="hidden" nodetype="parent" value="A">
  <input id="A1" name="A1" type="text" nodetype="child" value="a1val">
  <input id="A2" name="A2" type="text" nodetype="child" value="a2val">
  <input id="B" name="B" type="hidden" nodetype="parent" value="B">
  <input id="B1" name="B1" type="text" nodetype="child" value="B1">
  <input id="B2" name="B2" type="text" nodetype="child" value="B2">
<form>
0
Hassan Imam 2 mar. 2018 a las 07:04
function writeJSONfile() {
  var obj = {};
  $(".main").each(function() {
    var mainId = this.id;
    obj[mainId] = {};
    $("."+mainId).each(function() {
      obj[mainId][this.id] = $(this).val();      
    })
  });
  console.log(JSON.stringify(obj));
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form id="info">
  <input id="A" class="main" name="A" type="hidden" nodetye="parent" value="A">
  <input id="A1" class="A" name="A1" type="text" nodetype="child" value="a1val">
  <input id="A2" class="A" name="A2" type="text" nodetype="child" value="a2val">
  <input id="B" class="main" name="B" type="hidden" nodetye="parent" value="B">
  <input id="B1" class="B" name="B1" type="text" nodetye="child" value="B1">
  <input id="B2" class="B" name="B2" type="text" nodetye="child" value="B2">
  <form>
    <input type="button" onclick="writeJSONfile()" value="Run">
0
Aneesh R S 2 mar. 2018 a las 07:11

Pruebe esto :

   function writeNodeJSON() {
       var obj = {};
       var ref = obj;
       $("form#info :input").each(function () {
           var id = this.id;
           if ($(this).attr("nodetype")==="parent") {
               obj[id] = {};
               ref = obj[id];
           } else
               ref[id] = $(this).val();
       });
       console.log(JSON.stringify(obj));
    //    alert(JSON.stringify(obj));
    //    return JSON.stringify(obj);
    }}

Compruebo por nombre de atributo "nodetype"

0
C.Tin 2 mar. 2018 a las 07:01

Se realizaron algunos cambios en la administración de classes y ids. Una función rápida y fácil para resolver su problema.

Espero que esto sea lo que estabas buscando. Feliz de explicar o ayudar en una mejor solución si es necesario.

function writeJSONfile() {
  var obj = {};

  $(".main").each(function() {
    var mainId = this.id;
    obj[this.id] = {};
    $("input").each(function() {
      if ($(this).hasClass(mainId)) {
        obj[mainId][this.id] = $(this).val();;
      }
    })
  });
  var json = JSON.stringify(obj);
  alert("check" + json);
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form id="info">
  <input id="A" class="main" name="A" type="hidden" nodetye="parent" value="A">
  <input id="A1" class="A" name="A1" type="text" nodetype="child" value="a1val">
  <input id="A2" class="A" name="A2" type="text" nodetype="child" value="a2val">
  <input id="B" class="main" name="B" type="hidden" nodetye="parent" value="B">
  <input id="B1" class="B" name="B1" type="text" nodetye="child" value="B1">
  <input id="B2" class="B" name="B2" type="text" nodetye="child" value="B2">
  <form>
    <button onclick="writeJSONfile()">Run</button>
0
Gerardo BLANCO 2 mar. 2018 a las 06:58

Escribir como esto puede funcionar:

function writeJSONfile() {
		debugger;
    var obj = {};
    var children = {};
    $("form#info :input").each(function(){
    		var parent = this;
    		if(parent.getAttribute("nodetype")=="parent"){
        	obj[parent.id] = {};
          var nexts = $(parent).nextAll();
          for(let i=0;i<nexts.length;i++){
          	if(nexts[i].getAttribute("nodetype")!="child"){
            	break;
            }else{
            	obj[parent.id][nexts[i].id] = $(nexts[i]).val();
            }
          }
        }
    });
    var json = JSON.stringify(obj);
    alert("check"+json);
}
writeJSONfile();
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
    <form id="info">
      <input id="A" name="A" type="hidden" nodetype="parent" value="A">
      <input id="A1" name="A1" type="text" nodetype="child" value="a1val">
      <input id="A2" name="A2" type="text" nodetype="child" value="a2val">
      <input id="B" name="B" type="hidden" nodetype="parent" value="B">
      <input id="B1" name="B1" type="text" nodetype="child" value="B1">
      <input id="B2" name="B2" type="text" nodetype="child" value="B2">
    <form>
0
LightNow 2 mar. 2018 a las 07:31