http request problem on angular

Gxbriel_99

Mar 23rd, 2025

Never

Add comment

Not a member of Pastebin yet? Sign Up, it unlocks many cool features!

TypeScript 4.76 KB | Source Code | 0 0

raw download clone embed print report

//TYPE
export type TFilm={
idFilm:number,
nome:string,
descrizione:string
}
//SERVICE
import { Injectable } from '@angular/core';
import { Categoria } from '../_type/categoria.type';
import { Libro } from '../_type/libro.type';
import { ChiamataHTTP } from '../_type/chiamataHTTP.type';
import { HttpClient } from '@angular/common/http';
import { Observable } from 'rxjs';
import { IRispostaServer } from '../_interface/IRispostaServer.interface';
@Injectable({
providedIn: 'root'
})
export class ApiService {
constructor(private http:HttpClient) { }
/**
*
* @param risorsa(string|number)[]
* questo array definisce la risorsa della collection oppure l'elemento specifico
* della risorsa
* La funzione calcola l'url dell'api dove X e' il nome dell'api(in questo esempio CATEGORIE)
* @returns string stringa che rappresenta l'endpoint del server
*/
protected calcolaRisorsa(risorsa: (string | number)[]):string{
const server: string ='http://localhost:8000/api' //path della route
const versione:string='v1' //versione della route
let url= server+'/'+ versione+ '/'
risorsa.forEach(x=>{url=url+x+'/'})
return url
}
/**
* Questa funzione definisce il tipo di risposta a seconda del tipo di richiesta fatta
* @param risorsa (string|number)[] risorsa di cui voglio sapere i dati(nome dell'api)
* @param tipo string GET|POST|PUT|DELETE tipo di chiamata HTTP
* @param parametri OBJECT|NULL paramentri da passare all'endpoint se e' di tipo (POST|PUT)
* @returns Observable
*/
protected richiestaGenerica(risorsa: (number | string)[], tipo: ChiamataHTTP, parametri?: Object | null):Observable<IRispostaServer>{
//uso una funzione per calcolare l'url
const url=this.calcolaRisorsa(risorsa)
//Qui vado a definire la risposta a seconda del tipo di richiesta
switch (tipo) {
case 'GET': return this.http.get<IRispostaServer>(url)
break;
// case 'POST':
// break;
// case 'PUT':
// break;
// case 'DELETE':
// break
default: return this.http.get<IRispostaServer>(url)
break
}
}
//ESERCIZIO FATTO DA ME
public getFilms():Observable<IRispostaServer> {
const risorsa: string[] = ['film2']
return this.richiestaGenerica(risorsa, 'GET')
}
public getSingoloFilm(id:string):Observable<IRispostaServer> {
const risorsa: string[] = ['filmSIngolo',id]
return this.richiestaGenerica(risorsa, 'GET')
}
}
//TS DEL COMPONENT
import { Component, OnInit } from '@angular/core';
import { ActivatedRoute } from '@angular/router';
import { delay, map, Observable } from 'rxjs';
import { IRispostaServer } from 'src/app/_interface/IRispostaServer.interface';
import { ApiService } from 'src/app/_service/api.service';
import { TFilm } from 'src/app/_type/film.type';
@Component({
selector: 'app-selected',
templateUrl: './selected.component.html',
styleUrls: ['./selected.component.scss']
})
export class SelectedComponent implements OnInit {
//8) Dico alla pagina di cercare il valore nell'url definendolo nel constructor
//ActivatedRoute cerca i valori nell'url
//ApiService mi serve per fare le chiamate api
//9)definisco una var che conterra' l'id che estraggo dall'url
id: string | null = null
//12)Definisco l'OBS che mi ritornera' la risposta
singoloFilm$!: Observable<IRispostaServer>
//14)Ora vado definire l'array che conterra la risposta
arrSingoloFilm: TFilm|null = null;
constructor(private api: ApiService, private route: ActivatedRoute) {
//10)indico che il valore di dovra' essere quello ottenuto dall'url e faccio il debug
this.id = this.route.snapshot.paramMap.get('id')
console.log(this.id)
//13)Controllo che l'id non sia null e se rispetta la condizione popolo l'obs
if (this.id !== null) {
this.singoloFilm$ = this.api.getSingoloFilm(this.id)
}
}
//11)Ora in ApiService creo la funzione che fara' la chiamata all'api
//15)Ora vado definire la risposta
ngOnInit(): void {
console.log('ngOnInit chiamato');
this.singoloFilm$.pipe(
map(x => x.data),
).subscribe({
next: x => {
console.log('Dati ricevuti:', x);
this.arrSingoloFilm! = x;
}
});
}
}
//HTML DEL COMPOPNENT
<ul *ngIf="arrSingoloFilm !== null">
<li>
<p>ID: {{ arrSingoloFilm.idFilm }}</p>
<p>NOME: {{ arrSingoloFilm.nome }}</p>
<p>DESCRIZIONE: {{ arrSingoloFilm.descrizione }}</p>
</li>
</ul>
<div *ngIf="arrSingoloFilm === null">
<p>Caricamento in corso...</p>
</div>
//ERRORE
In console vedo i dati ma non a video,se arrSingoloFilm diventa un array non trova le sue proprieta(ho controllato che sono quelle)

Tags: angular

Add Comment

Please, Sign In to add comment