Tengo resultados en la búsqueda: '1 Búsqueda encontrada' pero no aparecen en la tabla - Angular12

Question

Logré que la búsqueda funcione (que antes no lo hacía). Cuando busco "Lourdes del Mar", tal cual está escrito ahí, lo encuentra, me dice '1 Búsqueda encontrada'. Lo que yo necesito es que sea indiferente si se escribe en mayúscula o minúscula, y además que no solo busque por nombre, sino también por DNI, fecha de nacimiento, etc.

Aquí mi código:

busqueda.component.html

<div class="container">
<h1 class="titulo text-center">Buscar un acta</h1>
<div class="busqueda">
    <div class="form-group">
        <input (keyup)="onSubmit($event)" [(ngModel)]="searchValue" type="text" id="searchKey" class="form-control" placeholder="Buscar..." />
        <i class="fas fa-search"></i>
    </div>
    <p class="txt text-center">La búsqueda se puede realizar por nombre, apellido, DNI, fecha de nacimiento o lugar de nacimiento.</p>
    <div *ngIf="condition; then block1; else block2"></div>
    <ng-template #block1>
        <i class="fa fa-spinner fa-spin" aria-hidden="true"></i> Buscando resultados para
        <strong>{{prevText}}</strong>
    </ng-template>
    <ng-template #block2>
        <h6>{{res_cnt}} Búsqueda encontrada</h6>
        <table class="table table-hover">
            <thead>
                <tr class="tabla">
                    <th>Apellido y Nombre</th>
                    <th>DNI</th>
                    <th>Fecha de Nacimiento</th>
                    <th>Lugar de Nacimiento</th>
                    <th>Acta de Nacimiento</th>
                </tr>
            </thead>
            <tbody>
                <tr class="tabla" *ngFor="let user of actas">
                    <td class="txt-left">{{user.nombre}}</td>
                    <td>{{user.DNI}}</td>
                    <td>{{user.FechaNacimiento}}</td>
                    <td>{{user.LugarNacimiento}}</td>
                    <td>{{user.ActaNacimiento}}</td>
                </tr>
            </tbody>
        </table>
    </ng-template>
</div>

busqueda.component.ts

import { Component, OnInit } from '@angular/core';

@Component({
  selector: 'app-busqueda',
  templateUrl: './busqueda.component.html',
  styleUrls: ['./busqueda.component.css'],
})


export class BusquedaComponent implements OnInit {

  searchValue: string = null;
  items = [];
  condition: boolean = null;
  prevText: string = '';
  actas = [{
    "nombre": "Lourdes del Mar",
    "DNI": "40.775.265",
    "FechaNacimiento": "17/02/1998",
    "LugarNacimiento": "La Rioja, Capital",
    "ActaNacimiento": "VER"
  },
  {
    "nombre": "Lede, Milva Ernestina",
    "DNI": "44.123.456",
    "FechaNacimiento": "24/04/2004",
    "LugarNacimiento": "La Rioja, Capital",
    "ActaNacimiento": "VER"
  },
  {
    "nombre": "Lede, Guadalupe Esmeralda",
    "DNI": "01.234.567",
    "FechaNacimiento": "13/11/2005",
    "LugarNacimiento": "La Rioja, Capital",
    "ActaNacimiento": "VER"
  },
  {
    "nombre": "Lede, Ángel Gustavo",
    "DNI": "23.670.990",
    "FechaNacimiento": "07/01/1974",
    "LugarNacimiento": "Buenos Aires, Capital Federal",
    "ActaNacimiento": "VER"
  },
  {
    "nombre": "Mansilla Kukulis, Susana Estela",
    "DNI": "23.963.589",
    "FechaNacimiento": "24/06/1974",
    "LugarNacimiento": "La Rioja, Capital",
    "ActaNacimiento": "VER"
  }
  
];
  res_list = [];
  res_cnt: number = 0;
    
  onSubmit($event){
    if($event.keyCode === 13){
      this.condition = true;
      this.prevText = this.searchValue;
      this.res_cnt = 0;
      this.res_list = [];
      setTimeout(() => {
        this.condition = false;
        for(let i=0; i<this.actas.length; i++){
          if(this.actas[i].nombre === this.searchValue
             || this.actas[i].nombre.startsWith(this.prevText)){
            this.res_cnt += 1;
            this.res_list.push(this.actas);
          }
        }
      }, 3000);
      this.searchValue = null;
    }
  }

    //paginación
    pageOfItems: Array<any>;

    onChangePage(pageOfItems: Array<any>) {
      // update current page of items
      this.pageOfItems = pageOfItems;
  }

  constructor() { }

  ngOnInit(): void {
    console.log(123);

    this.items = Array(150).fill(0).map((x, i) => ({ id: (i + 1)}));
  }
}

Busqué por internet y no encuentro la lógica que necesito para mi aplicación.

Si es que sirve, me guié con este tutorial.

Answer 1

Vamos por partes:

if(this.actas[i].nombre === this.prevText.toLowerCase()
         || this.actas[i].nombre.startsWith(this.prevText)){
        this.res_cnt += 1;
        this.res_list.push(this.actas[i]);
      }

Pues, cada vez que se hace búsquedas de cadenas de texto o bien mandas todo a mayúsculas (uppercase) o bien mandas todo a verificar en minúsculas (lowercase).

Mira este ejemplo:

const str1 = 'Saturday night plans';    
console.log(str1.startsWith('sat'));
// expected output: false

En tu código, tienes:

this.prevText = this.searchValue;

Eso se define luego de dar un ENTER ($event.keyCode = 13).

Por lo tanto, si has colocado Lede, Guadalupe Esmeralda, esto se va a traducir como lede, guadalupe esmeralda, por lo tanto...

• Primera parte del IF, termina siendo FALSE por obvias razones.
• Segunda parte del IF, termina siendo FALSE porque el startsWith nunca se cumple entre mayúscula/minúscula.

Como ambas condiciones son falsas, lo demás no sigue.

En esta carrera tienes que acostumbrarte a leer la documentación oficial del lenguaje que estás usando, es una ventaja enorme. Me sorprende la actitud de tus docentes, no sé si mandarlos a capacitarse en temas de docencia o darle las gracias por haberte motivado a llegar aquí, o ambas cosas en todo caso.

Lectura recomendada: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String/startsWith

Answer 2

Si usas Visual Code y un linter en tu proyecto, te lo indica el mismo editor: this.actas[i] es un objeto. Ej:

actas: {
    nombre: 'Lalo';
    DNI: '111111111';
    FechaNacimiento: '03/03/2003';
    LugarNacimiento: 'Buenos Aires';
    ActaNacimiento: '2331231221312323';
}

Y vos estas preguntando si todo eso es igual a prevText, que es un simple string. Deberias comparar contra una de las propiedades del objeto.

Ademas, si hacer toLowerCase() de un string, seria conveniente que lo hagas tambien de las propiedades. A menos que estes segura que las mismas ya vienen en minusculas.

Por otra parte, startsWith no es un metodo disponible para el objeto this.actas[i]. Si es un metodo de string. Cuando compares contra las propiedades te desaparece ese error.

Si vas a usar varias veces el valor pprevio en minusculas, quizas te conviene this.prevText = this.searchValue.toLowerCase(); y dejar de hacerlo abajo para cada propiedad.

Si ya estas guardandote las actas coincidentes en res_list, entonces 1this.res_cnt += 1;no tiene sentido (podes usarthis.res_list.length`);

Si por alguna razon estas evitando hacer debug, podes loggear para intentar entender lo que va pasando. Ej. adentro del for:

console.log(`"${this.prevText}" vs "${this.actas[i].nombre.toLowerCase()}" === ${this.actas[i].nombre.toLowerCase() === this.prevText}?`);
console.log(`"${this.prevText}" vs "${this.actas[i].nombre.toLowerCase()}" startsWith? ${this.actas[i].nombre.toLowerCase().startsWith(this.prevText)}`);
console.log(`"${this.prevText}" vs "${this.actas[i].nombre.toLowerCase()}" includes? ${this.actas[i].nombre.toLowerCase().includes(this.prevText)}`);