Erase Mistake in Pop-up Angular JSON Information and Bootstrap

Question

Erase Mistake in Pop-up Angular JSON Information and Bootstrap

Encountering an ERROR TypeError:

Cannot read property 'id' of undefined

while attempting to delete data in a modal using Bootstrap. When I click the button, I correctly receive the data in JSON format in the modal (as shown in the image). Any ideas on how to resolve this issue?... By the way, the insert, select, and update functionalities work as intended, but the delete operation is throwing this error.

component.ts

selectedExamen;
examenes: Examen[];
@ViewChild('btnClose') btnClose: ElementRef;
constructor(private dataService: dataService, public dialog: MatDialog) {
  this.getExamenes();
  this.selectedExamen = {
    id: -1, nombreExa: '', descripcionExa: '',
    release_date: '', fechaExa: '', categoriaExa: '', nombrePac: '',
    apellidoPac: '', rutPac: '', apellidoDoc: '', nombreDoc: ''
  };
}
delete (exa): void {
  this.dataService.deleteExamenes(exa.id);
  this.examenes = this.examenes.filter(e => e !== exa);
}
examenClicked = (exa) => {

  this.dataService.getOneExamen(exa.id).subscribe(
    (data: Examen) => {
      this.selectedExamen = data;
      console.log('JSON DATA --->', data);
    },
    error => {
      alert('Error al Conectar Datos ');
    }
  );
}

component.html

<button class="btn btn-danger" href="#deleteCategory" (click)="examenClicked(categorias)" data-toggle="modal" >Borrar</button>
<button class="btn btn-secondary" type="button" href="#signinModal" data-toggle="modal"  (click)="examenClicked(categorias)">Editar</button>  

"modal button"
 <button type="button" class="btn btn-danger" (click)="delete()">Borrar</button>

service (I suspect the mistake lies here?)

deleteCategorias(id: number): Promise <void> {
  const url = `${"http://127.0.0.1:8000/categoria"}/${id}`;
  return this.http.delete(url, { headers: this.headers })
    .toPromise()
    .then(() => null)
}
getOneCategory(id): Observable <Categoria> {
  return this.httpClient.get<Categoria>(this.baseurl + '/categoria/' + id ,
  ).pipe()
}

The error occurs when I press the button in the modalhttps://i.sstatic.net/8ApKM.png

angular typescript bootstrap-4

Answer 1

Answer №1

The onClick event for your modal button is currently being handled by the delete(exa) event handler. This event handler expects an argument of "exa", but you are invoking it with just delete():

<button type="button" class="btn btn-danger" (click)="delete()">Delete</button>

To resolve this error, you need to modify your component's delete() method to not require an exa parameter:

selectedExamen;
examenes: Examen[];
@ViewChild('btnClose') btnClose: ElementRef;
constructor(private dataService: DataService, public dialog: MatDialog) { }

ngOnInit(){ //Initialization code should be placed inside ngOnInit() whenever possible
   this.getExamenes(); //What is the purpose of this method???
}

delete (): void { //Removed exa parameter
  if(this.selectedExamen != undefined){ //Utilize selectedExamen which you retrieve upon opening the modal.
     this.dataService.deleteExamenes(this.selectedExamen.id).subscribe(
         (deleteSuccess) => {
             alert('Delete successful');
         },
         (error) => {
             alert('Error deleting');
         }
     )
     this.examenes = this.examenes.filter(e => e !== this.selectedExamen);
  }else{
     alert('No examen selected');
  }
}


examenClicked(exa){ //examenClicked = () => {} is equivalent to examenClicked(){}
  this.dataService.getOneExamen(exa.id).subscribe(
    (data: Examen) => {
      this.selectedExamen = data;
      console.log('JSON DATA --->', data);
    },
    error => {
      alert('Error connecting to data');
      this.selectedExamen = { //Moved this from the constructor to here
         id: -1, nombreExa: '', descripcionExa: '',
         release_date: '', fechaExa: '', categoriaExa: '', nombrePac: '',
         apellidoPac: '', rutPac: '', apellidoDoc: '', nombreDoc: ''
       };
    }
  );
}

In addition, ensure that your service is using the same HttpClient service instance as your getOneCategory method:

deleteCategorias(id: number): Promise <void> {
  const url = `${"http://127.0.0.1:8000/categoria"}/${id}`;
  return this.httpClient.delete(url, { headers: this.headers });
  //It's preferable to use Observables instead of promises for making HTTP requests.
  //You are using .subscribe() in `delete()` to send the HTTP request.
}


getOneCategory(id): Observable <Categoria> {
  return this.httpClient.get<Categoria>(this.baseurl + '/categoria/' + id);
}

Answer 2

The onClick event for your modal button is currently being handled by the delete(exa) event handler. This event handler expects an argument of "exa", but you are invoking it with just delete():

<button type="button" class="btn btn-danger" (click)="delete()">Delete</button>

To resolve this error, you need to modify your component's delete() method to not require an exa parameter:

selectedExamen;
examenes: Examen[];
@ViewChild('btnClose') btnClose: ElementRef;
constructor(private dataService: DataService, public dialog: MatDialog) { }

ngOnInit(){ //Initialization code should be placed inside ngOnInit() whenever possible
   this.getExamenes(); //What is the purpose of this method???
}

delete (): void { //Removed exa parameter
  if(this.selectedExamen != undefined){ //Utilize selectedExamen which you retrieve upon opening the modal.
     this.dataService.deleteExamenes(this.selectedExamen.id).subscribe(
         (deleteSuccess) => {
             alert('Delete successful');
         },
         (error) => {
             alert('Error deleting');
         }
     )
     this.examenes = this.examenes.filter(e => e !== this.selectedExamen);
  }else{
     alert('No examen selected');
  }
}


examenClicked(exa){ //examenClicked = () => {} is equivalent to examenClicked(){}
  this.dataService.getOneExamen(exa.id).subscribe(
    (data: Examen) => {
      this.selectedExamen = data;
      console.log('JSON DATA --->', data);
    },
    error => {
      alert('Error connecting to data');
      this.selectedExamen = { //Moved this from the constructor to here
         id: -1, nombreExa: '', descripcionExa: '',
         release_date: '', fechaExa: '', categoriaExa: '', nombrePac: '',
         apellidoPac: '', rutPac: '', apellidoDoc: '', nombreDoc: ''
       };
    }
  );
}

In addition, ensure that your service is using the same HttpClient service instance as your getOneCategory method:

deleteCategorias(id: number): Promise <void> {
  const url = `${"http://127.0.0.1:8000/categoria"}/${id}`;
  return this.httpClient.delete(url, { headers: this.headers });
  //It's preferable to use Observables instead of promises for making HTTP requests.
  //You are using .subscribe() in `delete()` to send the HTTP request.
}


getOneCategory(id): Observable <Categoria> {
  return this.httpClient.get<Categoria>(this.baseurl + '/categoria/' + id);
}

Erase Mistake in Pop-up Angular JSON Information and Bootstrap

Answer №1

Similar questions

item uploaded via internet not restricted

Clear all events from an HTML element and its descendants with TypeScript

Leverage the event handler within a React Component when working with TSX tags

Tips for injecting a service into a class (not a component)

Encountered an error while attempting to execute Angular application due to schema validation failure

I am looking to incorporate serial numbers into two distinct loops within an Angular application

Creating an uncomplicated search bar that dynamically adjusts values based on its function

Is there a way to navigate to a separate homepage based on the user's login status in Angular?

Issues with Angular 2 template not refreshing during testing

Issue with alignment of Bootstrap 4 dropdown menu within grid layout

The error message "pipe does not exist on type" is encountered when attempting to use pipes with RxJS 6

The reactivity of arrays in Vue components' props is limited

Customize styles for a specific React component in a Typescript project using MaterialUI and JSS

Prevent data loss on webpage refresh by using Angular's local storage feature

Boost Page Speed with Angular

Modifying content directly within the Angular Material data table

How to activate a directive in Angular2 using a component when clicking

utilize the getStaticProps function within the specified component

Improving performance with Bootstrap 4 Inline Grid or utilizing Sass mixins

Angular: Concealing a Component within a Controller