1

Acabo de realizar un programa que permite actualizar un textarea con formato JSON a través de un formulario. Ahora necesito hacer exactamente lo contrario, obtener los valores del JSON e implementarlos dentro del formulario con los datos cambiados.

He probado a poner un value vacío dentro del input, e intentar cambiarlo, pero no me sale. El documento lo tengo tal que así:

//      BTN ADD BUTTON V_POWER

function addPower() {
   var power = document.getElementById("power");
   //aquí agregamos el componente de tipo input
   var input = document.createElement("INPUT");
   //aquí indicamos que es un input de tipo text
   input.type = 'text';
   input.name = 'v_power';
   
   //y por ultimo agreamos el componente creado al padre
   power.appendChild(input);
}


//       BTN ADD BUTTON V_ENERGY
function addEnergy()    {
   var energy = document.getElementById("energy");
   //aqui agregamos el componente de tipo input
   var input = document.createElement("INPUT");
   //aqui indicamos que es un input de tipo text
   input.type = 'text';
   input.name = 'v_energy';
   
   //y por ultimo agreamos el componente creado al padre
   energy.appendChild(input);
}


//    BTN LECTURA VALORES INPUT

function sndFrm()   {
//    Numerar cuantos input hay y pasarlos por variable

   var jotason = [];
   document.body.querySelectorAll(".templatecARD").forEach(form=>{

         let obj = {
            title : form.querySelector(".name_tarif").value
         };
         // power
         let power = {};
         form.querySelectorAll("input[name=t_power]").forEach((inpt, index)=>{
            var ob = power[index]||{};
            ob.type=inpt.value;
            power[index]=ob;
         });
         form.querySelectorAll("input[name=v_power]").forEach((inpt, index)=>{
            var ob = power[index]||{};
            ob.value=inpt.value;
            power[index]=ob;
         });

         // energy
         let energy = {};
         form.querySelectorAll("input[name=t_energy]").forEach((inpt, index)=>{
            var oj = energy[index]||{};
            oj.type=inpt.value;
            energy[index]=oj;
         });
         form.querySelectorAll("input[name=v_energy]").forEach((inpt, index)=>{
            var oj = energy[index]||{};
            oj.value=inpt.value;
            energy[index]=oj;
         });
         obj.power = power;
         obj.energy = energy;
         jotason.push(obj);

   });

   var jsoned = JSON.stringify(jotason,undefined, 2);
   document.getElementById('txtare').value=jsoned;
}
<!DOCTYPE html>
<html>
<head>
    <title>LOGOS Energía</title>
    <meta charset="UTF-8"/>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
    <script src="app.js"></script>
</head>
<body>

    <!-- FORMULARIO -->
<form method="post">
    <div class="templatecARD" data-group="0" >
        <label>Tarif</label>
        <input type="text" class="name_tarif" name="tarif"/>
<br/>
            <label>Power</label>

        <div id="power">
            <input type="text" name="t_power"/>
            <input type="text" name="v_power"/>
            <button type="button" onclick="addPower()">+</button>
        </div>
<br/>
            <label>Energy</label>

        <div id="energy">
            <input type="text" name="t_energy"/>
            <input type="text" name="v_energy"/>
            <button type="button" onclick="addEnergy()">+</button>
        </div>
    </div>

<br>
    <button type="button" onclick="sndFrm()">UPDATE TEXTAREA</button>
</form>
    <!-- FORMULARIO -->


    <!-- EDITOR DE JSON -->
    <br>
<textarea id="txtare" style="width: 300px; height: 300px;"></textarea>
    <!-- EDITOR DE JSON -->
<button type="button" onclick="copyPaste()">UPDATE FORM</button>

</body>
</html>

No estoy utilizando ningún framework, por tanto solo uso javascript. ¿Cómo podría pasar los datos de forma inversa? ¿Cambiando el JSON dentro del textarea y actualizando el formulario?

[EDIT]

Vale, creo haber conseguido da un paso más. Inserté un schema del JSON creado:

  "$schema": "http://json-schema.org/draft-04/schema#",
  "type": "array",
  "items": [
    {
      "type": "object",
      "properties": {
        "title": {
          "type": "string"
        },
        "power": {
          "type": "object",
          "properties": {
            "0": {
              "type": "object",
              "properties": {
                "type": {
                  "type": "string"
                },
                "value": {
                  "type": "string"
                }
              },
              "required": [
                "type",
                "value"
              ]
            }
          },
          "required": [
            "0"
          ]
        },
        "energy": {
          "type": "object",
          "properties": {
            "0": {
              "type": "object",
              "properties": {
                "type": {
                  "type": "string"
                },
                "value": {
                  "type": "string"
                }
              },
              "required": [
                "type",
                "value"
              ]
            }
          },
          "required": [
            "0"
          ]
        }
      },
      "required": [
        "title",
        "power",
        "energy"
      ]
    }
  ]
}

Con una función para ver si lo valida, pero no se realmente si se llega a validar solo con el enlace que tiene el propio schema. Por otro lado, asignando la variable schema al valor del textarea:

schema = document.getElementById('txtare').value;

Hago que los valores del json dentro del textarea cambie, lo interesante en ese momento es que, al hacer eso, TAMBIÉN cambien los valores del propio formulario que está más arriba.

5
  • Es un problema más complejo del que creo que supones: ¿qué pasa si el formulario está vacío y necesitas rellenarlo con 4 inputs de "power" y 3 de "energy"? Necesitas primero crear la estructura del formulario, añadiendo datos. No es complicado, pero necesitas procesar los datos y crear los inputs el 15 feb. 2021 a las 17:45
  • Vale, voy a investigar sobre el tema. Si no me aclaro volveré a preguntar.
    – AQMR
    el 16 feb. 2021 a las 7:17
  • Es decir, lo que me propones es que tengo que hacer un schema de json. Vale, mas o menos sé como hacerlo eso. El gran PERO es que no se cómo implementarlo, pero es cuestión de investigar. Si doy con la respuesta lo pondré por aquí.
    – AQMR
    el 16 feb. 2021 a las 7:27
  • Yo no habría llegado tan lejos como para formalizar el esquema del JSON, pero sí necesitas funciones para crear el formulario "desde cero" al cargar un JSON el 16 feb. 2021 a las 9:34
  • Crear el formulario de cero sin alterar los datos? No entiendo lo que quieres decir
    – AQMR
    el 16 feb. 2021 a las 9:51

0

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

Examina otras preguntas con la etiqueta o formula tu propia pregunta.