2

realicé una agenda de contactos para practicar javascript y está todo bien, pero hay una parte que estoy seguro se puede mejorar pero no se me ocurre como. estoy repitiendo varias veces algo y eso no es lo debido ya saben(DRY)don´t repeat yourself

el problema viene porque necesito el valor de una propiedad de la instancia, en el caso de un contacto seria instancia.propiedad ó mejor dicho contacto.edad

no sé como hacer para usar por ejemplo una función, que depende como se quieran ordenar los contactos se le pase un parámetro a la función y se busque la propiedad me explico quisiera hacer algo como

function orderBy(propiedad){
     let arrToSort = []
     for(let i = 0; i < arrContacts.length; i++){
     arrToSort.push(arrContacts[i].propiedad)//aqui el problema porque ".propiedad" da error
 }
  return arrToSort.sort((a,b) => a - b)    
}

ése es el problema que si quiero obtener contactos por edad ó por nombre ó por identificacion personal lo debo hacer 3 veces y solo cambia una pequeña cosa

aqui les dejo el codigo comentado con la parte que quiero refactorizar

aqui el codepen para que lo vean funcionando, un poco feo pero sirve por ahora jeje enlace a codepen

aqui el html

<!DOCTYPE html>
<html lang="es" dir="ltr">
<head>
<meta charset="utf-8">
<title>agenda tablas</title>
<link rel="stylesheet" href="agenda.css">
</head>
<body>
<div class="entrada">
    <div class="inputs">
      <input type="text" 
placeholder="cedula" id="ci">
      <input type="text" 
placeholder="nombre" id="name">
      <input type="number" 
placeholder="edad" id="age">
      <input type="text" placeholder="sexo" 
id="sex">
      <input type="number" 
placeholder="telefono" id="telefono">
      <div class="botonDiv">
        <button type="button" name="button" 
id="boton">agregar</button>
      </div>
    </div>
    <!-- ordenar por criterio -->
    <div class="botonesOrdenar">
      <button id="botonNombre" 
onclick="ordenar(1)">Nombre</button>
      <button id="botonCedula" 
onclick="ordenar(2)">Cédula</button>
      <button id="botonEdad" 
onclick="ordenar(3)">Edad</button>
    </div>
    <!-- buscar por criterio -->
    <div class="buscar">
      <input type="number" 
id="buscarCedula" placeholder="buscar por 
cedula">
      <input type="text" id="buscarNombre" 
placeholder="buscar por nombre">
      <input type="number" id="buscarEdad" 
placeholder="buscar por edad">
      <input type="number" 
id="buscarTelefono" placeholder="buscar por 
telefono">
    </div>
  </div>

<!-- parte por default de la agenda -->
<div class="Principal" id="Principal">
<div class="defaultPersonaYBorrar">
<div class="defaultPersonContainer">
    <div class="defaultCaracteristica" 
id="caracteristica">cedula</div>
    <div class="defaultCaracteristica" 
id="caracteristica">nombre</div>
    <div class="defaultCaracteristica" 
id="caracteristica">edad</div>
    <div class="defaultCaracteristica" 
id="caracteristica">sexo</div>
    <div class="defaultCaracteristica" 
id="caracteristica">telefono</div>
</div>
    <a class="enBlanco"></a>
</div>

<!-- en este div se meten los nuevos 
contactos -->
<div class="principalPersonas" 
id="principalPersonas">

</div>


</div>
      <script type="text/javascript" 
src="agenda.js">

      </script>
</body>
</html>

y aqui el más importante el javascript: la parte que quiero acomodar empieza y termina por comentarios para que se guíen un poco

      const boton = document.getElementById("boton");
  boton.addEventListener('click',agregar)

  const principalContainer = document.getElementById('principalPersonas');
  //clase para crear datos de personas
  class Persona{
    constructor(cedula,nombre,edad,sexo,telefono){
      this.cedula = cedula;
      this.nombre = nombre;
      this.edad = edad;
      this.sexo = sexo;
      this.telefono = telefono;
    }
  }

  //array donde iran instancias de personas
  let personas = [];
  function agregar() {
    let cid = document.getElementById('ci')
    let ci = cid
    let name = document.getElementById('name')
    let age = document.getElementById('age')
    let sex = document.getElementById('sex')
    let phone = document.getElementById('telefono');

    personas.push(new Persona(ci.value, name.value, parseInt(age.value) ,sex.value ,phone.value));
    ci.value = ""; name.value = ''; age.value = ''; sex.value = ''; phone.value = '';  

  dibujar(personas)

  }
  // variable de contador para  alternar colores
  let cont = 0;
  function dibujar(arr,encontrado,message){
    if(encontrado == false){
      principalContainer.innerHTML = `no se ha podido encontrar a contacto ${message}`;
    }else{
      let dibuPersona = arr.map( p => `
      <article class="personaYBorrar">
      <div class="personContainer ${cont % 2 == 0 ? 'oscurecido': ''}" id="personContainer">
        <div class="caracteristica">${p.cedula}</div>
        <div class="caracteristica">${p.nombre}</div>
        <div class="caracteristica">${p.edad}</div>
        <div class="caracteristica">${p.sexo}</div>
        <div class="caracteristica">${p.telefono}</div>
      </div>
        <a href="#">delete</a>
    </article>
    <span class="contadorCont">${cont++}</span>  
    `,cont = 0)  
    console.log(cont);

      principalContainer.innerHTML = dibuPersona.reduce((a,b)=> a+b,'');
        }

    }

    //buscar indice en contenedor HTML para luego remover
    function getIndex(evento){
        let item = evento.target.parentElement;
        let items = [...principalContainer.querySelectorAll('article')];

        return items.indexOf(item);
        }
    principalContainer.addEventListener('click',remover);


    function remover(e) {
      if(e.target.tagName === 'A'){
          personas.splice(getIndex(e),1);
          dibujar(personas);

      }
    }

    //  funcion para edad/nombre/cedula de los contactos en un array
    // =====================***********====================***************
    // =========***********====================***************============
    //      a partir de aqui es donde quiero refactorizar
    let EDAD = () => personas.map(p => p.edad);
    let NOMBRE = () => personas.map(p => p.nombre);
    let CEDULA = () => personas.map(p => p.cedula);

    function ordenar(opcion) {
      let ordenado;
      if(opcion == 1){
        ordenado = NOMBRE()
        ordenado.sort();
        compareAndPaintNombres(ordenado);
      } 

        else if(opcion == 2){
        ordenado = CEDULA();
        ordenado.sort((a,b)=> a - b);
        compareAndPaintCedulas(ordenado);
      }

      else{
          ordenado= EDAD();
          ordenado.sort((a,b)=> a - b);
          compareAndPaintEdades(ordenado);
      }

    }

    //  funcion para comparar los arrays ya ordenados y dibujarlos
    function compareAndPaintNombres(orde){
      let arrComparadoYOrdenado = [];


      for(let i = 0; i < personas.length;i++){
        for(let j = 0; j<personas.length;j++){
          if(orde[i] == personas[j].nombre){
      // solo push a personas[j] para que mande todo el objeto/instancia
            arrComparadoYOrdenado.push(personas[j]);
          }
        }
      }
      dibujar(arrComparadoYOrdenado);
    }

    function compareAndPaintCedulas(orde){
      let arrComparadoYOrdenado = [];

      for(let i = 0; i < personas.length;i++){
        for(let j = 0; j<personas.length;j++){
          if(orde[i] == personas[j].cedula){
      // solo push a personas[j] para que mande todo el objeto/instancia
            arrComparadoYOrdenado.push(personas[j]);
          }
        }
      }
      dibujar(arrComparadoYOrdenado);
    }

    function compareAndPaintEdades(orde){
      let arrComparadoYOrdenado = [];

      for(let i = 0; i < personas.length;i++){
        for(let j = 0; j<personas.length;j++){
          if(orde[i] == personas[j].edad){
      // solo push a personas[j] para que mande todo el objeto/instancia
            arrComparadoYOrdenado.push(personas[j]);
          }
        }
      }
      dibujar(arrComparadoYOrdenado);
    }
    //        aqui  termina donde quiero refactorizar
    // =====================***********====================***************
    // =========***********====================***************============
  //=========================================================//
  //buscar en la agenda
  let buscarCedula = document.getElementById('buscarCedula'),
      buscarNombre = document.getElementById('buscarNombre'),
      buscarTelefono = document.getElementById('buscarTelefono');


  buscarCedula.addEventListener('keyup',buscar);

  function buscar(evento) {
    if (evento.key === "Enter") {
      let buscado = [],encontrado = true; 
      personas.filter((p) => {
        if(this.value == p.cedula){
          buscado.push(p)
        }
      })
      if (buscado.length == 0) {encontrado = false}
      dibujar(buscado,encontrado,this.value);
    }
  }

bueno un poco larga la pregunta no?, pero la resumiré en esto, ¿como usar/obtener/buscar la propiedad-atributo de un objeto/instancia pasándole parámetros a una función, o algo parecido??

osea por ejemplo si tengo la clase Carro y tiene como atributos: color, marca ,caballos_de_fuerza etc, y hago varias instancias, como le hago para ordenarlos por color, ó por marca ó por caballos de fuerza sin tener que escribir tantas veces el código, ya que hasta ahora no he podido hacer mas eficiente el código

si alguien logra hacer más corta esa parte del codigo se lo agradeceré mucho me tomó un buen tiempo formular ésta pregunta jeje si la leiste toda muchas gracias de igual manera

espero con ansias.

2 respuestas 2

2

Hay una notación en Javascript que te puede solucionar el problema:

identificador[atributo]

donde atributo es un string. Te pongo un ejemplo:

const lista = [
  { id : 1, value : 'texto1'},
  { id : 3, value : 'texto3'},
  { id : 2, value : 'texto2'}
];

function mostrarAtributo(atrib) {
  lista.forEach(elemento => console.log(elemento[atrib]));
}

mostrarAtributo('id');
mostrarAtributo('value');

Esta notación suele ser más "fea" y no se usa tanto como identificador.atributo, pero tiene ciertas ventajas, ya que te permite casi cualquier combinación de caracteres para crear un atributo.

let objeto={};


//objeto.0-9 no compilaría

objeto['0-9']='texto';

console.log(objeto);

1
  • gracias Pablo Lozano, es justo lo que necesitaba, ahora esa parte del codigo es el triple de corta y funciona igual, gracias por la ayuda Commented el 2 oct. 2018 a las 0:03
1

Puede tener un método general para ordenar y otro para buscar elementos mediante una propiedad especifica.

Para Ordenar, dentro del onclick , en el HTML , podría pasar como parámetro la propiedad (para no modificar tanto, aunque se recomienda añadir los listener desde JS) , así se podría distinguir en base a que propiedad se realizara el ordenamiento.

En este caso, si la propiedad es nombre, la cuál se asume en el ejemplo, será la única que tendrá letras, es ahí donde se realiza la comparación con localeCompare en lugar de la típica a-b o b-a

Para buscar utilizamos el mismo principio, solo que aquí habrá que tener en cuenta un atributo más a su HTML, que sería un data-propiedad="nombre" que contendrá el nombre de la propiedad en la cuál se realizará la búsqueda. (puede elegir otro camino, pero es necesario el nombre de la propiedad) , para esto utilizaremos un expresión regular para simular un LIKE en SQL

la línea principalContainer.innerHTML = dibuPersona.reduce((a,b)=> a+b,''); está de más en el código, ya que dibuPersona contendrá solo HTML

El método remover lo puede realizar en una sola función (paso opcional)

Para el ejemplo se añadieron valores por defecto (evitar ingresar manualmente)

const boton = document.getElementById("boton");
boton.addEventListener('click',agregar)

const principalContainer = document.getElementById('principalPersonas');
principalContainer.addEventListener('click',remover);

//array donde iran instancias de personas
let personas = [];
// variable de contador para  alternar colores
var cont = 0;

//clase para crear datos de personas
class Persona{
    constructor(cedula,nombre,edad,sexo,telefono){
      this.cedula = cedula;
      this.nombre = nombre;
      this.edad = edad;
      this.sexo = sexo;
      this.telefono = telefono;
    }
}

// Datos de Inicio para el ejemplo
personas.push(new Persona(41,'juanito',10,'M',12355677));
personas.push(new Persona(88,'pedro',83,'M',974322));
personas.push(new Persona(5,'stack',55,'M',452241));
personas.push(new Persona(1,'maria',1,'F',028423));
dibujar(personas,true,'');

  function agregar() {
    let cid = document.getElementById('ci')
    let name = document.getElementById('name')
    let age = document.getElementById('age')
    let sex = document.getElementById('sex')
    let phone = document.getElementById('telefono');

    personas.push(new Persona(cid.value, name.value, parseInt(age.value) ,sex.value ,phone.value));
    cid.value = ""; name.value = ''; age.value = ''; sex.value = ''; phone.value = '';  

    dibujar(personas,true,'');

  }

function dibujar(arr,encontrado,message){
    if(!encontrado){
      principalContainer.innerHTML = `no se ha podido encontrar a contacto ${message}`;
    }else{
      let dibuPersona = arr.map( p => `
          <article class="personaYBorrar">
            <div class="personContainer ${cont++ % 2 == 0 ? 'oscurecido': ''}" id="personContainer">
                <div class="caracteristica"> Cédula  ${p.cedula}</div>
                <div class="caracteristica">Nombre ${p.nombre}</div>
                <div class="caracteristica">Edad ${p.edad}</div>
                <div class="caracteristica">Sexo ${p.sexo}</div>
                <div class="caracteristica">Teléfono ${p.telefono}</div>
            </div>
            <a href="#">delete</a>
        </article>
    `); 
      dibuPersona += `<span class="contadorCont"> TOTAL DE PERSONAS ${arr.length}</span> `
      principalContainer.innerHTML = dibuPersona;
      //Código Innecesario para contenido HTML
      //principalContainer.innerHTML = dibuPersona.reduce((a,b)=> a+b,'');
    }

}

    function remover(e) {
      if(e.target.tagName === 'A'){
        let item = e.target.parentElement;
        let items = [...principalContainer.querySelectorAll('article')];
        personas.splice(items.indexOf(item),1);
        dibujar(personas,personas.length>0, '');
      }
    }

  //=========================================================//
  //buscar en la agenda
    let buscarCedula = document.getElementById('buscarCedula');
    let buscarNombre = document.getElementById('buscarNombre');
    let buscarEdad = document.getElementById('buscarEdad');
    let buscarTelefono = document.getElementById('buscarTelefono');

    buscarCedula.addEventListener('keyup',busquedaPorPropiedad);
    buscarNombre.addEventListener('keyup',busquedaPorPropiedad);
    buscarEdad.addEventListener('keyup',busquedaPorPropiedad);
    buscarTelefono.addEventListener('keyup',busquedaPorPropiedad);

    function busquedaPorPropiedad(evento) {
        let propiedad = evento.target.getAttribute('data-propiedad');
        let valor = evento.target.value|| "" ;
        let key = evento.keyCode || evento.which ||evento.key;
        // si es enter
        if(key===13){
            // expresión regular parecida al LIKE en MySQL ;)
            let regex = new RegExp(`${valor}.*`);
            let personasFilter = personas.filter(el=>{
                // convertimos a cadena la propiedad para que funcione el match
                let valString = ""+el[propiedad];
                return  valString.match(regex) ;
            })
            dibujar(personasFilter,personasFilter.length>0,'');
        }
    }

    function ordenar(propiedad) {
        let letters = propiedad==='nombre';
       personas.sort((a,b)=>{
            // si la propiedad es nombre, se compara con localeCompare
            if(letters)return a[propiedad].localeCompare(b[propiedad]);
            // caso contrario , normalmente.
            return a[propiedad] - b[propiedad];
       })
       dibujar(personas,personas.length>0,'');
    }
<div class="entrada">
    <div class="inputs">
      <input type="text" placeholder="cedula" id="ci">
      <input type="text" placeholder="nombre" id="name">
      <input type="number" placeholder="edad" id="age">
      <input type="text" placeholder="sexo" id="sex">
      <input type="number" placeholder="telefono" id="telefono">
      <div class="botonDiv">
        <button type="button" name="button" id="boton">agregar</button>
      </div>
    </div>
    <!-- ordenar por criterio -->
    <div class="botonesOrdenar">
      <button id="botonNombre" onclick="ordenar('nombre')">Nombre</button>
      <button id="botonCedula" onclick="ordenar('cedula')">Cédula</button>
      <button id="botonEdad" onclick="ordenar('edad')">Edad</button>
    </div>
    <!-- buscar por criterio -->
    <div class="buscar">
      <input type="number" id="buscarCedula" placeholder="buscar por cedula" data-propiedad="cedula">
      <input type="text" id="buscarNombre" placeholder="buscar por nombre" data-propiedad="nombre">
      <input type="number" id="buscarEdad" placeholder="buscar por edad" data-propiedad="edad">
      <input type="number" id="buscarTelefono" placeholder="buscar por telefono" data-propiedad="telefono">
    </div>
  </div>


<!-- en este div se meten los nuevos 
contactos -->
<div id="principalPersonas">

</div>

1
  • Joel gracias por la ayuda, la parte de buscar con expresiones regulares es interesante, estudiaré tu codigo para enterderlo mejor ya que hay cosas nuevas que estoy viendo Commented el 2 oct. 2018 a las 1:23

Tu Respuesta

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

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