I'm currently facing an issue with Angular 15 where I am trying to access the "content" element within a JSON data. However, when attempting to retrieve the variable content, I am unable to view the elements it contains.
import { Component, OnInit } from '@angular/core';
import { Contacto } from '../contacto';
import { ContactoService } from '../contacto.service';
import { FormBuilder, FormGroup, Validators } from '@angular/forms';
import { MatDialog } from '@angular/material/dialog';
import { ContactoDetalheComponent } from './contacto-detalhe.component';
import { PaginaContacto } from './PaginaContacto';
@Component({
selector: 'app-contacto',
templateUrl: './contacto.component.html',
styleUrls: ['./contacto.component.css']
})
export class ContactoComponent implements OnInit{
formulario: FormGroup = new FormGroup('')
contacto: Contacto
contactos: Contacto[] = new Array
paginaContactos: PaginaContacto[] = []
paginaContacto: PaginaContacto = new PaginaContacto
mensagem: string = ''
errors: string[] = []
colunas: string[]= ['foto', 'id', 'nome', 'email', 'favorito']
pageSizeOptions: number[] = [5, 10, 15, 20]
constructor(
private contactoService: ContactoService,
private formBuilder: FormBuilder,
private dialog: MatDialog){
this.paginaContacto.totalElements = 0
this.paginaContacto.pageNumber = 0
this.paginaContacto.pageSize = 5
this.contacto = new Contacto('','')
}
ngOnInit(): void {
... more code ...
}
... more code ...
listarContactos(page: number, size: number){
this.contactoService
.listar(page, size)
.subscribe({
next: response =>{
this.contactos = response.content
console.log("imprimindo o erro.")
console.log(response)
},
error: errorResponse =>{
console.log('Erro ao obter os contactos', errorResponse)
}
})
}
... more code ...
}
import { Injectable } from '@angular/core';
import { HttpClient, HttpParams } from '@angular/common/http';
import { Contacto } from './contacto';
import { Observable } from 'rxjs';
import { environment } from 'src/environments/environment.development';
import { PaginaContacto } from './contacto/PaginaContacto';
@Injectable({
providedIn: 'root'
})
export class ContactoService {
apiUrl: string = environment.API
constructor(private httpCliente: HttpClient) { }
... more code ..
listar(page: number, size: number): Observable<PaginaContacto[]>{
const params = new HttpParams()
.set('page', page)
.set('size', size)
return this.httpCliente.get<PaginaContacto[]>(
`${this.apiUrl}?${params}`,
{responseType:'json'}
);
}
}
import { Contacto } from "../contacto"
export class PaginaContacto{
content: Contacto[] = new Array()
pageNumber: number = 0
pageSize: number = 0
totalPages: number = 0
totalElements: number = 0
}
I have attempted the following:
this.contactos = response.content
this.contactos = response[:content]
this.contactos = response["content"]
this.contactos = response[0].content
this.contactos = response.map(contact => {
return contact.content
})
Unfortunately, none of these methods seem to work as expected.
This is the response displayed in the browser console:
{
"content": [
{
"id": 8,
"nome": "Vicente Simão",
"email": "<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="f0869993959e8495b0979d91999cde939f9d">[email protected]</a>",
"favorito": true,
"foto": null
},
{
"id": 15,
"nome": "Novo Adiconado",
"email": "<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="a6c8c9d0c9e6c1cbc7cfca88c5c9cb">[email protected]</a>",
"favorito": false,
"foto": null
}
],
"pageable": {
"sort": {
"sorted": true,
"unsorted": false,
"empty": false
},
"pageNumber": 5,
"pageSize": 2,
"offset": 10,
"unpaged": false,
"paged": true
},
"totalPages": 7,
"totalElements": 14,
"last": false,
"first": false,
"sort": {
"sorted": true,
"unsorted": false,
"empty": false
},
"numberOfElements": 2,
"size": 2,
"number": 5,
"empty": false
}