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.