Página completa con artistas, canciones y álbums

acá está la ruta al archivo artists.json

Mi versión con Observables (Ojo no eliminé subscripciones)

Servicio:

import { Injectable } from '@angular/core';
import { HttpClient } from '@angular/common/http';
import { Observable, of } from 'rxjs';
import * as dataArtist from './artists.json';

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

  constructor(private http: HttpClient) { }

  getNewReleases(): Observable<any> {
    const api = 'https://platzi-music-api.now.sh/browse/new-releases';
    return this.http.get(api);
  }

  getArtists(): Observable<any> {
    return of(dataArtist.items);
  }
}

Componente:

ionViewDidEnter() {
    forkJoin({
      newReleases: this.musicService.getNewReleases(),
      artists: this.musicService.getArtists()
    }).subscribe(({newReleases, artists}) => {
      this.songs = newReleases.albums.items.filter(e => e.album_type === 'single');
      this.albums = newReleases.albums.items.filter(e => e.album_type === 'album');
      this.artists = artists;
    });
  }			```

IONIC 6

Para trabajar con JSON estático se debe adicionar la siguiente línea en el archivo ts.config.json

"resolveJsonModule": true,

En el archivo en donde se definen los servicios platzi-music.service.ts, getArtists() es un poco diferente a lo explicado por el profesor

import * as dataArtists from './artists.json';
...
  getArtists() {
    return dataArtists;
  }

En el componente home.page.ts se llena el arreglo así:

this.artists = this.musicService.getArtists().items;

Cambiando/agregando solamente la opción “resolveJsonModule”: true no me funcionaba la lectura del json, me lo mostraba como un módulo y no lo trataba como un json.
.
Para solucionarlo cambié en compilerOptions:
“module”: “es2020” por “module”: “commonjs”

primero haremos que se pueda cargar archivos estaticos .json en la aplicación, cambiando la configuracion en tsconfig.json

tsconfig.json

"compilerOptions": {
	...
	 "experimentalDecorators": true,
	 "resolveJsonModule": true,
	 "moduleResolution": "node",
	...
 },

luego ingresamos el archivo json “artists.json” dentro de nuestros servicios, con la información de este archivo

Luego modificamos nuestro servicio de consumo de API platzi-music, para que consuma el archivo json “artists.json”

platzi-music.service.ts

import * as dataArtists from './artists.json';

... 

getArtists() {
 return dataArtists;
 }

Luego vamos al home page para consumir esta nueva función del servicio de platzi-music

home.page.ts

export class HomePage {
 artists: any[] = [];

 constructor(
 private musicService: PlatziMusicService
 ) {}

ionViewDidEnter() {
 this.fetchArtist();
 }

 fetchArtist() {
	 this.artists = this.musicService.getArtists().items;
 }

Hacemos los cambios en el html del home page para incluir a los artistas

home.page.html

<ion-content fullscreen="true" class="ion-padding">
	 <h1>Artistas</h1>
		 <ion-slides [options]='slideOps' *ngIf="artists.length">
			 <ion-slide *ngFor="let artist of artists">
				 <ion-avatar>
					 <img [src]="artist.images[0].url" alt="">
					 <span>{{artist.name}}</span>
				 </ion-avatar>
			 </ion-slide>
		 </ion-slides>
	 <h1>Albums</h1>
		 <ion-slides [options]='slideOps' *ngIf="albums.length">
			 <ion-slide *ngFor="let album of albums">
				 <ion-avatar class="square-avatar">
					 <img [src]="album.images[0].url" alt="">
					 <span>{{album.name}}</span>
				 </ion-avatar>
			 </ion-slide>
		 </ion-slides>
 <h1>Canciones</h1>
	<ion-slides [options]='slideOps' *ngIf="songs.length">
		<ion-slide *ngFor="let song of songs">
			 <ion-avatar class="square-avatar">
				 <img [src]="song.images[0].url" alt="">
				 <span>{{song.name}}</span>
			 </ion-avatar>
		 </ion-slide>
	 </ion-slides>
</ion-content>

finalmente hacemos los cambios en los estilos del home page

home.page.scss

ion-avatar {
 height: 120px;
 width: 90%;
}

ion-avatar img {
 width: 90px;
 height: 90px;
}

ion-avatar span {
 font-size: 12px;
}

.square-avatar {
 --border-radius: 0;
}

Cargar archivos estaticos .json
tsconfig.json

{
    ...
    "resolveJsonModule:" true,
    ...
}

Importar .json en un service
service.ts

import * as dataArtists from "./artists.json";

ion-avatar con borde cuadrado
home.page.scss

.square-avatar{
    --border-radius: 0;
}

• A veces es necesario editar tanto el ion-avatar como el ion-avatar img en el scss para ponerles un tamaño definido.

Muy buena explicación. ¿ Estos arhivos json los podemos usar para guardar opciones de configuración?

aca el link del repo de esta clase, aunque aca si la parte de css si esta “feo” porque al cambiar el dispositivo si ya se descuadra o las imagenes se ven mas “alargadas” dependiendo del dispositivo

Recuerden estamos trabajando con sass, por lo que podemos anidar los selectores:

ion-avatar {
height: 120px;
width: 90px;

img {
height: 90px;
width: 90px;
}

span {
font-size: 12px;
}
&.squared-avatar {
–border-radius: 0;
}
}