-3

Estimados estoy iterando un objeto en el cual quiero transformar u obtener solo los elementos del array con map pero la llave del objeto cuando intento acceder me da error. voy a dejar codigo y capturas para un mejor entendimiento. Intenete con pluck y si me transforma pero me indica el compilador que pluck esta en desuso, que utilice map, pero obtengo ese error. Gracias.

// Servicio

import { Injectable } from "@angular/core";
import { HttpClient } from '@angular/common/http';
import { Observable } from 'rxjs';
import { Incident } from "../interfaces/incidencia.interface";
import { environments } from "src/environments/environments";


@Injectable({ providedIn: 'root' })
export class ServiceIncidencia {

    private baseUrl: string = environments.baseUrl;

    constructor(private http: HttpClient){}

    getIncidencias(): Observable<Incident[]>{
        return this.http.get<Incident[]>(`${this.baseUrl}/incidents`)
    }
}



// interface

export interface Incidencia {
    incident: Incident[];
}

export interface Incident {
    _id:            string;
    nombre:         string;
    description:    string;
    user:           Typeofincident;
    typeofincident: Typeofincident;
    disponible:     boolean;
}

export interface Typeofincident {
    _id:    string;
    nombre: string;
}

introducir la descripción de la imagen aquí

// componente

import { Component, OnInit } from '@angular/core';
import { Incident } from '../interfaces/incidencia.interface';
import { ServiceIncidencia } from '../services/incidencia.service';
import { map } from 'rxjs';
@Component({
  selector: 'app-incidencias',
  templateUrl: './incidencias.component.html',
  styles: [
  ]
})
export class IncidenciasComponent implements OnInit {
 
  incident: Incident[] = [];
 

  constructor( private serviceIncidencia: ServiceIncidencia){

  }
  ngOnInit(): void {
   this.serviceIncidencia.getIncidencias()
   .pipe(
    map(resp => resp.incident)
   )
   .subscribe(console.log)
    
}}

introducir la descripción de la imagen aquí

respuesta que se obtiene sin acceder con la llave incident

introducir la descripción de la imagen aquí

Este error lanza cundo coloco la llave incident

introducir la descripción de la imagen aquí

Si utilizo pluck si transforma, pero como comente me indica que esta en desuso. y obtenego el array transformado o sin la llave incident solo el array.

introducir la descripción de la imagen aquí

introducir la descripción de la imagen aquí

4
  • "me da error" -> Y qué error te da?? No somos adivinos. Usa el enalce editar para añadir el error EXACTO y de paso el modelo, porque lo primero que me viene a la cabeza es que tu objeto Incident no tiene un array incidents dentro, pero claro, me lo tengo que inventar porque no puedo verlo :)
    – Benito-B
    Commented el 30 ago. 2023 a las 14:18
  • Gracias por responder, la captura del pipe y map hay una llave quese llama incident,la marque con una flecha roja que esta claro en la imagen y el compilador indica esto (Property 'incident' does not exist on type 'Incident[]) Commented el 30 ago. 2023 a las 14:21
  • hay una propiedad incident: Incident[] = []; en la parte superior que viene de una interface, nesecitas ver la interface? Commented el 30 ago. 2023 a las 14:24
  • El error te está diciendo exactamente lo que pasa... y si obviamente si te da un error el modelo (la interfaz en este caso) DEBES mostrarla. El problema es que el objeto que te está llegando y tu interfaz no son iguales, en tu interfaz no tienes la propiedad incidents. Cambia lo que devuelves en la API o actualiza tu modelo acorde.
    – Benito-B
    Commented el 30 ago. 2023 a las 15:48

2 respuestas 2

1

El problema está en tu función "getIncidencias", probablemente esta función esté definida algo así como:

getIncidencias(): Incident[]

esto le dice al intellisense que espera recibir un array cuando en verdad (por lo que muestras) estas recibiendo un objeto mas o menos del tipo:

{
    incident: Incident[]
}

puedes corregir la definición de tu función o bien saltar esta comprobación usando la notación con brackets

this.serviceIncidencia.getIncidencias()
.pipe(
    map(resp => resp['incident'])
)
.subscribe(console.log)

EDIT

acabo de ver bien y claro tienes definida la función qué dice retornar un array pero el API te entrega un objeto por lo que en verdad tu función debe decir que retorna el objecto { incident: Incident[] } o bien hacer el map en el ServiceIncidencia que tiene mas sentido. La solución ideal sería

export class ServiceIncidencia {
....

this.http.get<Incident[]>(`${this.baseUrl}/incidents`)
.pipe(
    map(resp => resp['incident'])
)
}
0

solucion Servicio:

En el archivo de servicio se uso un pipe con el operador map para transformar el objeto en un array utilizando las llave ['incident'], ayudo a llegar a transformar, pero me lanzaba el error del tipo de datos, utilizando as keyof typeof resp, es donde le digo que el tipo de dato y a que valor le debe asignar a la resp, con esto ya me trae la infrmacion o la respuesta transformada.

  getIncidencias():Observable<any>{
    return this.http.get<Incident[]>(`${this.baseUrl}/incidents`)
      .pipe(map(resp => resp['incident' as keyof typeof resp])
    );
  }

Componente:

en el componente invoco el servicio con la data ya transformada y me subscribo a mi instancia o interface y le indico que sea igual a la respuesta que se trae del servicio con los datos transformados, y utlizo esa llave para recorrer el arreglo en el html con *ngFor

public incidents: Incident[] = [];

ngOnInit(): void {
    this.serviceIncidencia
      .getIncidencias()
      .subscribe(
        (resp) => {(this.incidents = resp)}
      );
  }
<ul class="list-group list-group-flush" *ngFor="let item of incidents; let i = index">
  <li
    class="list-group-item d-flex justify-content-between align-items-start"
    routerLink="/incidencias/resueltas"
  >
    <div class="arrow">
      <fa-icon [icon]="faChevronRight"></fa-icon>
    </div>
    <div class="ms-2 me-auto">
      <div class="time">hace 40 min</div>
      <div class="fw-bold mb-3">{{item.nombre}} <span class="number">{{i+1}}</span></div>
      {{item.description}}
    </div>
        <div [ngSwitch]="item.typeofincident.nombre">
            <div *ngSwitchCase="'Duda'">
                <span class="badge bg-duda rounded-pill"
                    ><fa-icon [icon]="faGraduationCap"></fa-icon
                    ><span class="info">{{item.typeofincident.nombre}}</span>
                    </span>
            </div>
            <div *ngSwitchCase="'Integración'">
                <span class="badge bg-integracion rounded-pill"
                    ><fa-icon [icon]="faCannabis"></fa-icon
                    ><span class="info">{{item.typeofincident.nombre}}</span>
                    </span>
            </div>
            <div *ngSwitchCase="'Pedido'">
                <span class="badge bg-pedido rounded-pill"
                    ><fa-icon [icon]="faWandMagic"></fa-icon
                    ><span class="info">{{item.typeofincident.nombre}}</span>
                    </span>
            </div>
        </div>
  </li>
</ul>

Respuesta del JSON sin llaves:

introducir la descripción de la imagen aquí

1
  • 1
    Tu respuesta es solo codigo. Por favor mira Cómo responder. Se pide que expliques que hace este código (mas alla que a ti vos te parezca obvio, puede que otro usuario no lo vea tan simple).
    – gbianchi
    Commented el 31 ago. 2023 a las 1:07

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.