es.davy.ai

Preguntas y respuestas de programación confiables

¿Tienes una pregunta?

Si tienes alguna pregunta, puedes hacerla a continuación o ingresar lo que estás buscando.

  • es.davy.ai/
  • Programación /
  • No puedo recorrer el objeto de arreglo recibido del servicio, pero puedo ver su contenido.

No puedo recorrer el objeto de arreglo recibido del servicio, pero puedo ver su contenido.

30 Jul, 2023 Programación

Cuando intento acceder al array devuelve “undefined”. Es como si lo que recibo estuviera dentro de otro elemento, porque en la consola no se accede directamente al array, sino que tienes que abrir una pestaña para verlo.
Console.logs

Ver la respuesta json en Postman:
json response

Este es el código del componente:

fetchHolidays(){
  this.calendarService.fetchDates(this.year)
  .subscribe((dates)=>{
    console.log(dates);
    console.log(dates.length);
    console.log(dates[0]);
    this.holidays=dates;
    this.updatedVariables=true;
  }, (err) => {
    console.log(err)
    //this.holidays=[];
  }
  );
}

Este es el código del modelo Calendar:

export class Calendar{
  public date: string= '';
  public type: TypeDate = new TypeDate; 
}

export class TypeDate{
  public id: number = 0;
  public descripcion: string = ''; 
}

Este es el código de mi servicio:

public fetchDates(year: number): Observable<calendar[]>{
  const url = `${this.baseUrl}${year}`;
  return this.httpClient.get<calendar[]>(url);
}

He intentado extraer los datos cambiando el modelo:

export class ContentCalendar{
  public calendar: Calendar[]=[];
}

export class Calendar{
  public date: string= '';
  public type: TypeDate = new TypeDate; 
}

export class TypeDate{
  public id: number = 0;
  public descripcion: string = ''; 
}

En mi componente:

fetchHolidays(){
  this.calendarService.fetchDates(this.year)
  .subscribe((contentCalendar)=>{
    console.log(contentCalendar);
    console.log(contentCalendar['calendar'][0]['date'])
    console.log(contentCalendar.calendar[0].date);

Y el error es “Cannot read properties of undefined (reading ‘0’)”
Console object information</calendar[]></calendar[]>

Tags:  , , , ,

Answer

  1. Avatar for davy.ai
    davy.ai

    El problema parece ser que la respuesta JSON de la API está envuelta dentro de un objeto principal, y el array Calendar[] está contenido dentro de ese objeto. Es por eso que al acceder directamente al array se devuelve undefined.

    Para resolver esto, deberás actualizar tu modelo y el código de servicio para reflejar esta estructura. Una solución podría ser crear una nueva clase que represente al objeto principal, con una propiedad para el array Calendar[].

    Aquí tienes un ejemplo de cómo podrías estructurar tu código:

    // define la nueva clase principal con el array de calendarios como propiedad
export class CalendarResponse {
  public calendar: Calendar[];
}

// modifica la función del servicio para devolver la nueva clase de respuesta en lugar de Calendar[]
public fetchDates(year: number): Observable<calendarresponse> {
  const url = `${this.baseUrl}${year}`;
  return this.httpClient.get<calendarresponse>(url);
}

// actualiza el código del componente para acceder al array de calendarios desde el objeto de respuesta
fetchHolidays() {
  this.calendarService.fetchDates(this.year)
    .subscribe((response) => {
      console.log(response); // debería contener el array de calendarios
      console.log(response.calendar.length);
      console.log(response.calendar[0].date);
      this.holidays = response.calendar; // asigna el array de calendarios a la propiedad del componente
      this.updatedVariables = true;
    }, (err) => {
      console.log(err)
    });
}

    Con estos cambios, deberías poder acceder al array Calendar[] desde el objeto de respuesta y asignarlo a la propiedad de tu componente.

Comments are closed.