Compra acceso a todo Platzi por 1 a帽o

Antes: $249

Currency
$209/a帽o

Paga en 4 cuotas sin intereses

Paga en 4 cuotas sin intereses
Suscr铆bete

Termina en:

15D
16H
48M
58S

Solicitudes GET

2/23
Recursos

El verbo HTTP GET en JavaScript suele utilizarse para la obtenci贸n de datos. Por ejemplo, una lista de productos o el detalle de un 煤nico producto en particular.

Pasos para el consumo de API con Angular

El primer paso para el consumo de API con Angular es la importaci贸n del m贸dulo correspondiente y los servicios, luego sigue la siguiente gu铆a para proceder en tu camino.

1. Importa los m贸dulos

Aseg煤rate de importar HttpClientModule en el m贸dulo principal de tu proyecto.

// app.module.ts
import { HttpClientModule } from '@angular/common/http';

@NgModule({
  declarations: [
    // ...
  ],
  imports: [
    HttpClientModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

2. Crea un servicio en tu proyecto

Crea un servicio en tu proyecto que ser谩 el responsable de todas las peticiones HTTP que tu aplicaci贸n necesite. Dicho servicio tiene que importar el cliente HTTP de Angular HttpClient para realizar los llamados a una API.

// services/api.service.ts
import { Injectable } from '@angular/core';
import { HttpClient } from '@angular/common/http';

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

  constructor(
    private http: HttpClient,
  ) { }

  getProducts(): Observable<Product[]> {
    return this.http.get<Product[]>(`https://example.com/api/productos`);
  }
}

3. Importa los componentes

Importa el nuevo servicio en el componente que necesite realizar peticiones HTTP.

// components/catalogo/catalogo.component.ts
import { ApiService } from 'src/app/services/api.service';

@Component({
  selector: 'app-catalogo',
  templateUrl: './catalogo.component.html',
  styleUrls: ['./catalogo.component.scss']
})
export class CatalogoComponent implements OnInit {

  public productos: Producto[] = [];

  constructor(
    private apiService: ApiService,
  ) { }

  ngOnInit(): void {
    this.apiService.getProducts()
      .subscribe(res => {
        this.productos = res;
      });
  }
}

En Angular, cuando un componente tiene la necesidad de realizar una petici贸n HTTP antes de ser renderizado suele utilizarse el hook ngOnInit() que forma parte del Ciclo de Vida de un componente.


Contribuci贸n creada por: Kevin Fiorentino.

Aportes 50

Preguntas 17

Ordenar por:

驴Quieres ver m谩s aportes, preguntas y respuestas de la comunidad?

o inicia sesi贸n.

Hola! esta ser谩 la Fake API de este curso https://young-sands-07814.herokuapp.com/docs 馃槑

Para aquellos que les cuenta utilizar postman u otro client, VS code tiene una extensi贸n se llama Thunder Client muy interactiva para este tipo de peticiones y integrada en nuestro editor de codigo

A manera de recomendaci贸n y aporte, hubiera sido bueno iniciar otro proyecto desde cero totalmente diferente 馃槂
Gracias

Tuve un Deja Vu

No se olviden de instalar todas las dependencias al clonar el proyecto para que no ocurra errores, lo pueden hacer con el siguiente comando:

npm i

Hola copmas,la nueva URL es:
https://api.escuelajs.co/api/v1/products/

Al final use la API que utilizaron en React y me funciono:

https://api.escuelajs.co/api/v1/products

La API esta teniendo problemas en este momento, Sabado 27 de noviembre a las 6:47, Hora Paraguay

Soy el unico que esta teniendo problemas? xd

hi a d铆a de hoy la API est谩 funcionando, solo hay que entender c贸mo funciona la interfaz de usuario que nos brinda el Swagger.
Vamos a hacer una petici贸n get al servicio que nos est谩n brindando:

  1. Tenemos que saber cu谩l ser谩 nuestra url base para hacer peticiones al servicio, en esta ocasi贸n tomaremos como la url base la siguiente "https://young-sands-07814.herokuapp.com/api/"
    El servicio en Angular lo tendr铆amos de la siguiente manera
import { Injectable } from '@angular/core';
import { HttpClient } from '@angular/common/http';

import { Product } from './../models/product.model';

@Injectable({
  providedIn: 'root'
})
export class ProductsService {
//URL del API
  private URL_BASE = 'https://young-sands-07814.herokuapp.com/api/'

  constructor(
    private http: HttpClient
  ) { }

  getAllProducts() {
    return this.http.get<Product[]>('https://fakestoreapi.com/products');
  }
} 
  1. debemos ir a mira al swagger cu谩l es el endpoint que vamos a consumir, en este caso vamos a consumir el de traer todos los productos, entonces la url a la cual haremos la petici贸n ser铆a: 鈥https://young-sands-07814.herokuapp.com/api/products鈥, entonces nuestro servicio crearemos un m茅todo nuevo donde traemos los productos
import { Injectable } from '@angular/core';
import { HttpClient } from '@angular/common/http';

import { Product } from './../models/product.model';

@Injectable({
  providedIn: 'root'
})
export class ProductsService {
  private URL_BASE = 'https://young-sands-07814.herokuapp.com/api/'

  constructor(
    private http: HttpClient
  ) { }

  getAllProducts() {
    return this.http.get<Product[]>('https://fakestoreapi.com/products');
  }

  //M茅todo que hace la petici贸n a los productos
  getProductsFakeApi() {
    return this.http.get(`${this.URL_BASE}products`);
  }
} 

y ya, lo 煤ltimo ser铆a consumir el servicio donde lo necesitemos,
si tienes alguna duda, comenta, estar茅 atento 馃槃

Las solicitudes get son para hacer una llamada a la API y sirven para obtener informaci贸n desde el servidor que puede ser un dato simple, un objeto, el detalle del objeto o una lista de objetos.

A pocos d铆as de no poder ver las im谩genes (?)

He encontrado esta api que sirve para realizar este curso, aunque hay que hacer ciertas modificaciones:
Creamos un modelo m谩s Products.model.ts:

import { Product } from "./product.model";

export interface Products{
  products:Product[];
}

En products.service.ts:

// importamos el nuevo servicio
import { Products } from '../models/products.model';
// resto del codigo ... 
getAllProducts() {
	//Aqui no esperamos ya un array de Productos porque el array est谩 dentro del modelo de Products
    return this.http.get<Products>('https://dummyjson.com/products');
  }

Y en products.component.ts:

ngOnInit(): void {
    this.productsService.getAllProducts()
    .subscribe(data => {
      this.products = data.products;
    });
  }

Espero que les sirva.

Tuve una semana emocionalmente pesada compa帽eros, no logr茅 sentarme a practicar la clase y seguir con mi formaci贸n.

Tengo aprobados m煤ltiples cursos de habilidades blandas, tengo mis cuadernillos de actividades y un bullet journal.

Hay d铆as en los que ni uno mismo cree en si. Los abrazo a todos los que han pasado por este s铆ndrome del impostor cr贸nico.

Ahora les comparto c贸mo va quedando mi proyecto.

Uso la app Responsively para ver m煤ltiples vistas responsivas.

Si despues de hacer el get no carga es posible que la URL est茅 incorrecta, con esta llegan directo:
https://young-sands-07814.herokuapp.com/api/products

Decenas de gracias por los comentarios y el apoyo de la comunidad. Con lo que estoy aprendiendo, cada vez identifico y resuelvo los problemas antes y mejor, y gracias a su ayuda comprendo incluso el por qu茅.

Existe una herramienta muy util para generar la clase de Typescript con el JSON de la Respuesta de la API 馃憞馃憞馃憞馃憞馃憞馃憞

Quicktype es una herramienta que te permite convertir un JSON en una clase en varios lenguajes de programaci贸n, incluyendo TypeScript. Esto es especialmente 煤til cuando trabajas con API que devuelven datos en formato JSON y quieres tener una forma f谩cil de acceder a esos datos en tu aplicaci贸n.

Para utilizar Quicktype, debes ingresar la URL de la API que deseas analizar o pegar directamente el JSON en la herramienta. Luego, seleccionas el lenguaje de programaci贸n en el que deseas generar la clase y Quicktype generar谩 autom谩ticamente el c贸digo correspondiente.

La herramienta tambi茅n te permite personalizar la clase generada, como cambiar los nombres de las propiedades o excluir algunas de ellas. Adem谩s, Quicktype tiene una interfaz gr谩fica muy amigable, que te permite explorar los datos de tu JSON y ver c贸mo se transforman en c贸digo

Los valores falsy in javascript son los siguientes: * null * undefined * ''(string vac铆o) * 0 * false * 0n * NaN por lo cual \*ngIf="product.images.lenght" basta ya que array o es cero o un n煤mero positivo

porque el modelamiento de las apis es importante

  1. Hacer un Tipado Fuerte con los datos esperados
  2. nos ayuda en el mapeo y en saber a que referencia hace parte
  3. para pruebas facilita la vida.

A d铆a de hoy, Julio 2023, la plataforma de im谩genes no est谩 funcionando.

Otra API que pueden usar

Me funcion贸 con este endpoint:
https://api.escuelajs.co/api/v1/products

Y deben cambiar en el modelo 鈥渋mage鈥 por 鈥渋mages鈥.

Para cuando vayan a hacer install de las dependencias del proyecto, saldran muchas advertencias relacionadas a las actualizaciones.

鈥渄ependencies鈥: {
"@angular/animations": 鈥渵14.2.10鈥,
"@angular/common": 鈥渵14.2.10鈥,
"@angular/compiler": 鈥渵14.2.10鈥,
"@angular/core": 鈥渵14.2.10鈥,
"@angular/forms": 鈥渵14.2.10鈥,
"@angular/platform-browser": 鈥渵14.2.10鈥,
"@angular/platform-browser-dynamic": 鈥渵14.2.10鈥,
"@angular/router": 鈥渵14.2.10鈥,
鈥渄ate-fns鈥: 鈥淾2.29.3鈥,
鈥渞xjs鈥: 鈥渵7.6.0鈥,
鈥渢slib鈥: 鈥淾2.4.1鈥,
鈥渮one.js鈥: 鈥渵0.12.0鈥
},
鈥渄evDependencies鈥: {
"@angular-devkit/build-angular": 鈥渵14.2.10鈥,
"@angular-eslint/builder": 鈥14.2.0鈥,
"@angular-eslint/eslint-plugin": 鈥14.2.0鈥,
"@angular-eslint/eslint-plugin-template": 鈥14.2.0鈥,
"@angular-eslint/schematics": 鈥14.2.0鈥,
"@angular-eslint/template-parser": 鈥14.2.0鈥,
"@angular/cli": 鈥渵14.2.10鈥,
"@angular/compiler-cli": 鈥渵14.2.10鈥,
"@types/jasmine": 鈥渵3.8.0鈥,
"@types/node": 鈥淾12.11.1鈥,
"@typescript-eslint/eslint-plugin": 鈥4.28.2鈥,
"@typescript-eslint/parser": 鈥4.28.2鈥,
鈥渆slint鈥: 鈥淾7.32.0鈥,
鈥渏asmine-core鈥: 鈥渵4.5.0鈥,
鈥渒arma鈥: 鈥渵6.3.0鈥,
鈥渒arma-chrome-launcher鈥: 鈥渵3.1.0鈥,
鈥渒arma-coverage鈥: 鈥渵2.0.3鈥,
鈥渒arma-jasmine鈥: 鈥渵5.1.0鈥,
鈥渒arma-jasmine-html-reporter鈥: 鈥渵2.0.0鈥,
鈥渢ypescript鈥: 鈥渵4.8.4鈥
}

Eso lo pueden pegar en el package.json (Reemplazando la variable de dependencies y devDependecies) y hacen la instalacion de nuevo. Son versiones mas actualizadas de las dependencias.

La api se encuentra caida a d铆a de hoy 31 diciembre 2021 hora 11 am

La API no funciona

Asi se puede obtener el simbolo $ y un formato que me parece mas agradable
$300.00

currency:'COP':'symbol-narrow':'1.2-2'

Error de versiones en Angular (de 12 a 13)

En el caso de que a la hora de hacer ng serve o usen npm run start les d茅 error por tener una versi贸n arriba de 12 en Angular deben actualizar su versi贸n del proyecto en angular para que coincida con la global de su equipo.
Utilicen el siguiente comando:

npx @angular/cli@13 update @angular/core@13 @angular/cli@13
/* En caso de que haya un error con las migraciones usen --force pero de preferencia no usarlo */

La forma de explicar del profe es muy buena, me gustar铆a que nos hiciera un curdo de Rxjs.

Si tienen problemas para compilar el c贸digo una vez que lo descargan, prueben pararse en la carpeta del projecto cd src y luego en terminal npm install, luego ya compilara con ng serve -o

casi no puedo iniciar el proyecto por la versi贸n pero lo logre 馃榿

Hoy Enero-22-2022 la API esta funcionando bien.

ya no est谩 funcionando <https://placeimg.com/> para generar imagenes, se puede cambiar a alguna de esta lista: [21 of the Best Placeholder Image Generators (loremipsum.io)](https://loremipsum.io/21-of-the-best-placeholder-image-generators/)

Culminado, buen curso!

Las imagenes no se estan cargando

Actualmente las im谩genes de la API no funciona pero lo puedes reemplazar por la Platzi Fake Store API

Para que puedas tipas las respuestas de la API de una forma f谩cil QuickType. Especificas que el lenguaje sea TypeScript y las caracter铆sticas que deseas para el tipado

La API ya no sirve y el ejercicio empeora much铆simo. El array de imagenes dej贸 de funcionar en Junio de 2023. Por favor, pueden solucionarlo? La calidad de experiencia del ejercicio merma much铆simo.

Escog铆 esta ruta para aplicar las plantillas y lecciones vistas en
Curso para Aprender en L铆nea Efectivamente
De verdad que invertir en

  1. Organizaci贸n
  2. Lectura Exploratoria
  3. Borrador
    Se nota al sentir antes de comenzar las clases aplicadas que tienes control de la calidad de tu aprendizaje. Les recomiendo con creces y una medalla que inviertan en sus m茅todos de estudio y t茅cnicas de aprendizaje.
    .
    Tengo propuesto terminar la ruta de Frontend Angular para el siguiente mes y puedo visualizarlo sin abrumarme gracias al esfuerzo constante diario

https://app.quicktype.io/
El Profe nos hab铆a regalado esta p谩gina cursos antes para hacer los modelos.

htpp

Les dejo una api de una serie animada https://rickandmortyapi.com/

http鈥

Dejo esta API de pokemon que conoci cuando hice una prueba tecnica https://pokeapi.co/

En el video falta importar la libreria Observable de rxjs
import { Observable } from 鈥榬xjs鈥; para podernos subscribe and unsubscribe

hoy 2 de junio la api funciona, pero no me gusta que devuelva fotos tan random y los titulos no tienen nada que ver con las imagenes. prefiero la api de fakestore

Puede ser una tonter铆a pero me sac贸 un buen rato darme cuenta de mi error:
La API 鈥榥o funcionaba adecuadamente鈥, al cargar mi p谩gina sal铆a solamente los botones de 鈥淎dd to cart鈥 apilados en una columna, el problema lo vi al intentar poner otra API y es que olvide pasar image de singular a plural (鈥榠mages鈥) en el modelo, y, por ende, en el componente y la vista.

Fue solamente cambiar ese detalle y todo funcion贸 adecuadamente.

Para el tipado cre茅 una interfaz a partir de la respuesta de solicitud http get. Para ello us茅 https://app.quicktype.io/

Un bucle en el v铆deo, no es aporte, solo quer铆a comentarlo.

La API est谩 ca铆da, no funciona.