0

Estoy queriendo recorrer con un ngFor* una POKEAPI... que la pongo en un arreglo de objetos que ya lo tengo declarado en mi componente... Pero cuando ya la consumí, me tira este error escrito en el titulo en la consola en la solapa NETWORK...

Yo antes tenia mi arreglo de objetos tipado con otras características a las que tiene la API, pero quise aunquesea que me muestre un solo campo del arreglo de objetos poniéndole el mismo nombre y tampoco me sigue sin andar y me tira el error propiamente dicho.

Dejo mi codigo que creo que es donde puede estar el error y ademas el github de mi "minitrabajo"...

Mi servicio de DATA.

const URL = 'https://pokeapi.co/api/v2/pokemon/'
@Injectable({
  providedIn: 'root'
})
export class ProductDataService {

  constructor(private http: HttpClient) { }




  public getALL(): Observable<Productos[]> {
  return this.http.get<Productos[]>(URL);


  }
}

Mi HTML donde recorrro con el NgFor el supuesto arreglo suplantado por la API.

            <td>{{item.Nombre | uppercase}}</td>
            <td>{{item.Categoria}}</td>
            <td><img class="img-thumbnail" [src]="item.image" [alt]="item.Nombre" width="100" height="100"></td>
            <td>{{item.Precio | currency}}</td>
            <td><span  *ngIf="item.Stock==0" class="badge text-bg-warning"> SIN STOCK </span></td>
            <td><app-input-number [(cantidad)]="item.cantidad" [max]="item.Stock" *ngIf="item.Stock" (maxReached)="maxReached($event)"></app-input-number></td>
        <td><button class="btn btn-primary" (click)="addToCart(item)"> Comprar </button></td>
        </tr>
    </tbody>
</table>

Mi componente donde tengo las funciones para mostrar y donde tenia anteriormente mi arreglo de objetos:

products!: Productos [];
 
 

  constructor(private cart: ProductsCartService, private dataService: ProductDataService ) { 
    
  }

  ngOnInit(): void {
  this.dataService.getALL().subscribe(data => this.products = data );
  }

TIPADO DEL ARREGLO:

 export interface Productos {
Nombre: string;
Categoria: string;
Precio: number;
Stock: number;
image: string;
clearance: boolean;
cantidad: number;


}

Aca mi link de github con este problema de angular. https://github.com/JoaquinPavon/AngularProblema

Muchas gracias como siempre por la paciencia!! PD: aunque ahora aparezca item.Nombre ya lo he cambiado a item.name como figura en la API y cambiado en el tipado.

1 respuesta 1

0

El problema es que la API retorna un objeto y no un arreglo.

La estructura del json que devuelve la API se ve así:

{
    "count": 1154,
    "next": "https://pokeapi.co/api/v2/pokemon/?offset=20&limit=20",
    "previous": null,
    "results": [
        {
            "name": "bulbasaur",
            "url": "https://pokeapi.co/api/v2/pokemon/1/"
        }
    ]
}

Es un objeto que tiene una propiedad results, la cual es un arreglo, y eso es lo que se debe iterar.

Estos cambios deben hacerse:

El servicio (por simplicidad se remueven los tipos):

public getALL(){
  return this.http.get(URL);
}

La asignación de los datos (se usa la propiedad data.results:

ngOnInit(): void {
  this.dataService.getALL().subscribe(data => this.products = data.results);
}

Debes crear tipos compatibles para que funcione. Por ejemplo:

type ApiResponse = {
  results: Pokemon[]
}

type Pokemon = {
 name: string
 url: string
}
3
  • Gracias Lobos como siempre! Pero una consulta cuando asigno data.results el results me dice que no existe en el objeto a que se debe? Commented el 23 nov. 2022 a las 17:53
  • Cambia data por (data: ApiResponse), en el subscribe
    – Lobos
    Commented el 23 nov. 2022 a las 18:06
  • Quedaría algo así no? this.dataService.getALL().subscribe((data: ApiResponse) => this.products = data.results); Commented el 23 nov. 2022 a las 18:43

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.