0

Esto es lo que tengo:

window.addEventListener("load",()=>{
   var nomVre1 = new formLOGOSTariff("test-1", "test-atex-1", {key:12});
      for (var key in nomVre1){
         console.log(key);
         console.log(nomVre1[key]);
      }
   var nomVre2 = new formLOGOSTariff("test-2", "test-atex-2", {key:34});
   var nomVre3 = new formLOGOSTariff("test-3", "test-atex-3", {key:56});
   var nomVre4 = new formLOGOSTariff("test-4", "test-atex-4", {key:78});
});

Y necesito obtener las {key:12,34,56,78} de cada uno. Ya he probado el resultado del for, pero me retorna todos los objetos utilizados en el JavaScript telacionado con text-1, y su contenido.

El problema es: ¿Cómo obtengo como valor esas key?

[EDIT]

Esto es el código Js completo:



class formLOGOSTariff{

   constructor(id, idtxt, params){
      var temCard    = document.querySelector("#temp-card").innerHTML;
      var temPower   = document.querySelector("#temp-power").innerHTML;
      var temEnergy  = document.querySelector("#temp-energy").innerHTML;
      var temForm    = document.querySelector("#temp-form").innerHTML;
      this.id = id;
      this.idtxt = idtxt;
      let foorm = document.createElement('div');
         foorm.innerHTML = temForm;
         document.getElementById(id).appendChild(foorm);

      this.contentForm = foorm.querySelector(".content-form");


      foorm.querySelector(".btn-event-addFrm").addEventListener("click",()=>{
         this.addFrm();
      });
      foorm.querySelector(".btn-event-sndFrm").addEventListener("click", ()=>{
         this.sndFrm();
      });
      foorm.querySelector(".btn-event-delFrm").addEventListener("click", ()=>{
         this.delFrm();
      });

      let card = this.addFrm();

      document.body.querySelector('.btn-event-sndTo').addEventListener("click", ()=>{
         this.sndTo();
      });

      document.getElementById(this.idtxt).addEventListener("keyup", ()=>{
         if (this.idtxt = ''){
         } else{
         this.sndTo();
         }
      });


   }

   addPower(el)   {
      var temPower   = document.querySelector("#temp-power").innerHTML;

      let power = document.createElement("div");
      power.innerHTML = temPower;
      el.querySelector(".container-power").appendChild(power);

      power.querySelectorAll("input[name=t_power]").forEach(item=>{
         item.addEventListener("keyup", ()=>{
            this.sndFrm();
         });
      });

      power.querySelectorAll("input[name=v_power]").forEach(item=>{
         item.addEventListener("keyup", ()=>{
            this.sndFrm();
         });
      });


      return power;

   }

   addEnergy(el)   {
      var temEnergy  =  document.querySelector('#temp-energy').innerHTML;

      let energy = document.createElement('div');
         energy.innerHTML = temEnergy;
            el.querySelector('.container-energy').appendChild(energy);

      energy.querySelectorAll("input[name=t_energy]").forEach(item=>{
         item.addEventListener("keyup", ()=>{
            this.sndFrm();
         });
      });

      energy.querySelectorAll("input[name=v_energy]").forEach(item=>{
         item.addEventListener("keyup", ()=>{
            this.sndFrm();
         });
      });
               return energy;
   }

   addFrm() {
      var tmp = document.querySelector('#temp-card').innerHTML;
      var cont = this.contentForm;
      let frm  = document.createElement('div');
     
         frm.innerHTML = tmp;
         cont.appendChild(frm);

         frm.querySelectorAll(".name_tarif").forEach(item=>{
         item.addEventListener("keyup", ()=>{
               this.sndFrm();
            });
         });
         frm.querySelectorAll(".btn-event-addPower").forEach(item=>{
           item.addEventListener("click", ()=>{
               this.addPower(frm);
            }); 
         })
         frm.querySelectorAll(".btn-event-addEnergy").forEach(item=>{
           item.addEventListener("click", ()=>{
               this.addEnergy(frm);
            }); 
         })

         this.addPower(frm);
         this.addEnergy(frm);
      return frm;
   }

   sndFrm()   {
      var jotason = [];

      this.contentForm.querySelectorAll(".templatecARD").forEach(form=>{

            let obj = {
               title : form.querySelector(".name_tarif").value
            };

            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;
            });

            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(this.idtxt).value=jsoned;
   }

   sndTo(){
      this.contentForm.innerHTML='';
      let pJsn = document.getElementById(this.idtxt).value;
      var dat  = JSON.parse(pJsn);
      for(let n in dat){
         (form=>{

            let formDv = this.addFrm();
            formDv.querySelector(".container-power").innerHTML='';

               for(let n1  in form.power){
                  (pow=>{
                     let power = this.addPower(formDv);
                     
                     power.querySelector("[name=t_power]").value=pow.type;
                     power.querySelector("[name=v_power]").value=pow.value;
                  })(form.power[n1])
               }

            formDv.querySelector(".container-energy").innerHTML='';

               for(let n2 in form.energy){
                  (eng=>{
                     let energy = this.addEnergy(formDv);

                     energy.querySelector("[name=t_energy]").value=eng.type;
                     energy.querySelector("[name=v_energy]").value=eng.value;
                  })(form.energy[n2])
               }

            formDv.querySelector(".name_tarif").value=form.title;
           
         })(dat[n]);
      }
   }

   delFrm(){
      var nm = this.contentForm.getElementsByClassName("templatecARD").length -1;
      var cont = this.contentForm.getElementsByClassName("templatecARD")[nm];
      if (nm > 0){
         if(confirm('¿Quieres borrarlo')){
            cont.remove();
         } else {}
      } else {}
   }
}

window.addEventListener("load",()=>{
   var nomVre1 = new formLOGOSTariff("test-1", "test-atex-1", {key:111});
   var nomVre2 = new formLOGOSTariff("test-2", "test-atex-2", {key:222});
   var nomVre3 = new formLOGOSTariff("test-3", "test-atex-3", {key:333});
   var nomVre4 = new formLOGOSTariff("test-4", "test-atex-4", {key:444});
});
4
  • ¿Qué es formLOGOSTariff?
    – A. Cedano
    el 19 feb. 2021 a las 11:18
  • El nombre de la class de javascript donde está incluído todo el código de ejecución. Disculpa, ahora modifico
    – AQMR
    el 19 feb. 2021 a las 11:33
  • Me suena raro una clase con listeners y selectores de elementos dentro, ¿hay algo que justifique eso? Una clase debe ser pensada como un molde, no debería depender de los elementos HTML, sino ser informada desde fuera. Luego, tus key son pasadas a la clase en el constructor, es un argumento params que se puede ver en él, pero no haces nada con ese argumento. Por ejemplo, si tuvieras un método getParams() obtendrías los parámetros que le pasaste en el constructor. Creo que el problema es que estás planteando mal tu clase.
    – A. Cedano
    el 19 feb. 2021 a las 11:39
  • Es que la clase es para hacer de modelo, estoy de prácticas y me han pedido hacerlo así. Supongo que después les sirva a ellos como modelaje para otros formularios.
    – AQMR
    el 19 feb. 2021 a las 11:58

1 respuesta 1

3

Lo que ocurre en tu código es un mal planteamiento de lo que son las clases. Es extraño ver que estás diseñando una clase ligada a selectores y escucha de eventos del DOM. Generalmente una clase representa una entidad en tu aplicación que podría estar relacionada con otras, heredar, etc. Yo la pienso como un molde el cual debe ser llenado para crear objetos de ese tipo (clase). Luego, deberías dotarla de métodos para obtener cualquier información que haya sido suministrada.

El primer error que se aprecia en tu código es que no asignas a la clase los argumentos que ésta recibe en el constructor. Luego, la clase tampoco tiene métodos para devolverte cualquier propiedad que sea requerida a posteriori.

Veamos un ejemplo simple de tu clase donde asignamos los campos y la dotamos de un método getParams() que te permitirá obtener el valor de key. Le hemos puesto también un setter que permitiría modificar la clase si fuera necesario.

/*
  Esta es la clase, que debe existir en un solo lugar
  Y cuando la necesites la usas
  En ella defines cómo se comportarían los objetos del tipo formLOGOSTariff
*/
class formLOGOSTariff {

  constructor(id, idtxt, params) {
    this.id = id;
    this.idtxt = idtxt;
    this.params = params;
  }
  
  getId() {
    return this.id;
  }
  
  getIdTxt() {
    return this.idtxt;
  }  
  
  getParams() {
    return this.params;
  }

  setParams(params) {
    this.params=params;
  }
}

/*
  ------------------------------
  Aquí estamos en un contexto cualquiera de tu aplicación
  ------------------------------
*/
var nomVre1 = new formLOGOSTariff("test-1", "test-atex-1", {
  key: 12
});

console.log('Esta es la clase completa:');
console.log(nomVre1);

//Probemos los getter
console.log(nomVre1.getParams().key);
console.log(nomVre1.getId());
console.log(nomVre1.getIdTxt());

//Modificaremos los parámetros
nomVre1.setParams({key:8, other:'Lorem ipsum'});
console.log(`Ahora key vale: ${nomVre1.getParams().key}`);
console.log(nomVre1.getParams().other);
console.log('Esta es la clase completa:');
console.log(nomVre1);

2
  • AAAAAHHHHHH, que era con el params!!!! Jo, así es mucho más facil! Muchas gracias Cedano!
    – AQMR
    el 19 feb. 2021 a las 12:36
  • Si si si, perdona!
    – AQMR
    el 19 feb. 2021 a las 12:40

Tu Respuesta

Al pulsar en “Publica tu respuesta”, muestras tu consentimiento a nuestros términos de servicio, política de privacidad y política de cookies

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.