0

agradecería me orientaran como traerme los resultados del siguiente JSON a mi html en Angular, está es la estructura que tengo hasta el momento (Soy nuevo en Angular) :

json (Registro):

{
"id": 24,
"persona_id": 111111,
"fecha_registro": "2023-01-23 17:00:02",
"personas": {
    "id": 111111,
    "fullname": "Juan Rosas",
    "status": "activo",
    "area_id": 1,
    "area": {
        "id": 1,
        "nombre": "Administración",
    },
    "empresa": {
        "id": 1,
        "nombre": "ASFOS",
    }
}

}

Modelos en Angular :

Registro:

export interface Registro {
  id: number;
  fecha_registro: string;
  persona_id: number;
  personas: Persona[];
}

Persona:

export interface Persona {
  id:          number;
  cod_ext:     number;
  nombres:     string;
  apellidop:   string;
  apellidom:   string;
  fullname:    string;
  rut:         string;
  email:       string;
  picture_id:  string;
  status:      string;
  fecha_carga: Date;
  area_id:     number;
  empresa_id:  number;
  cargo_id:    number;
  estado_id:   number;
  created_at:  null;
  updated_at:  null;
  estado:      Estado;
  area:        Area;
  empresa:     Empresa;
  cargo:       Cargo;
  registro:    Registro[];
    }

Servicio :

  getLast(){
    return this.http.get(`${environment.api_url}/getDataRegistros`);
  }

Componente TS :

  registros: Registro[] = [];

  getLastRegistro(){
    this._registroService.getLast().subscribe(data=>{
      this.registros = data;

      console.log(data);

     });
  }

Componente HTML

<div *ngFor="let registro of registros">
  <h2>{{ registro.personas.fullname }}</h2>
  <h2>{{ registro.personas.area.nombre}}</h2>
</div>

Cuando quiero leer esto desde html en un label o solo mostrar me arroja el siguiente error :

Error TS2339: Property 'personas' does not exist on type 'Registro'.

ERROR Error: NG0900: Error trying to diff '[object Object]'. Only arrays and iterables are allowed

Agradeceré alguna orientación como hacer esto correctamente, gracias !!

Saludos..

1 respuesta 1

1

El problema es que tu respuesta no es del tipo Registro, los campos no coinciden, solamente tienes que agregar otro campo, así como parece que estas tratando de iterar sobre un objeto de arreglos.

De igual forma parece que la lógica no esta bien estructurada, no hace sentido que en el JSON personas solamente tenga datos de una sola persona, mientras que persona_id es del tipo persona? No sería del tipo number? Luego tienes que Persona tiene registro: Registro[] que a su vez tiene persona_id: Persona lo que a mi parecer crea un loop que puede llegar a ser confuso. Agrego código:

export interface Respuesta {
  id: number;
  fecha_registro: Date;
  persona_id: number;
  personas: Persona[];
}

En la interface de Persona tendrías ver los campos de registros, mientras que parece que ciertos campos no vienen en el JSON así que podrías usar el operador ? para decir que es opcional, algo así como created_at?: Date

Para simplificarte la vida con las interfaces te recomiendo que uses Quicktype.io o alguna extensión de VS Code como Paste JSON as Code

1
  • Hola @René , muchas gracias por responder y ayudarme. Actualice el código para las interfaces, así indicabas tu? La duda es ahora si los metodos del servicio y del componente.ts están bien para mostrar esto en el HTML? Commented el 1 sept. 2023 a las 15:56

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.