ANGULAR: Can't get my data to show on my HTML file

Question

I am fetching the api json placeholder and i am trying to get a page matching with the id of the route en the object. By console logging everything seems to work, when i navigate to the specific page, the object with the matching id shows up on my console but when i try to put the data on my html it just won't show up. And i get no errors. I don't know what to do. screenshot of the page

//SERVICE FILE//
import { HttpClient } from '@angular/common/http';
import { Injectable } from '@angular/core';
import { Stream } from './stream';
import { Observable} from 'rxjs';

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

constructor(private http: HttpClient) { }

getStream():Observable{
  return this.http.get("https://jsonplaceholder.typicode.com/albums/1/photos");
  }

getLiveStream(id: number): Observable {
  const url = `https://jsonplaceholder.typicode.com/albums/1/photos?id=${id}`;
  return this.http.get(url);
  }
}

//TS FILE//
import { Component, OnInit } from '@angular/core';
import { StreamService } from '../stream.service';
import { DomSanitizer } from '@angular/platform-browser';
import {ActivatedRoute} from '@angular/router';
import { Stream } from '../stream';

@Component({
  selector: 'app-livestream',
  templateUrl: './livestream.component.html',
  styleUrls: ['./livestream.component.scss']
})
export class LivestreamComponent implements OnInit {
  liveStream!: Stream;

  constructor(
    private streamService: StreamService, 
    private sanitizer: DomSanitizer, 
    private route: ActivatedRoute, 
    ) { }

    //is voor de "sanitizing unsafe style value url" error te vermijden//
    public getSantizeUrl(url : string) {
      return this.sanitizer.bypassSecurityTrustUrl(url);
  }

  ngOnInit() { 
    this.getLiveStream();

  }
      getLiveStream():void{
        const id = Number(this.route.snapshot.paramMap.get('id'));
        this.streamService.getLiveStream(id).subscribe(liveStream =>{
            this.liveStream = liveStream;
            console.log(this.liveStream);
        })
      }


    
    
}

//INTERFACE FILE
export interface Stream {
  id: number;
  title: string;
  url: string;
  thumbnailUrl: string;
}

// HTML FILE

  Livestream
  
      {{liveStream?.title}}

user_6294072 · Answer

As established in other answer, what you receive is an array with one object. I would extract the object from the array and also like to use the async pipe. So what I would do is:

import { map } from 'rxjs/operators';

//....

getLiveStream(id: number): Observable {
  const url = `https://jsonplaceholder.typicode.com/albums/1/photos?id=${id}`;
  return this.http.get(url).pipe(
    map((streams: Stream[]) => streams => streams[0] || {} as Stream)
  );
}

Component:

import { Observable} from 'rxjs';

// ...

liveStream$: Stream;

getLiveStream():void{
  const id = Number(this.route.snapshot.paramMap.get('id'));
  this.liveStream$ = this.streamService.getLiveStream(id);

Template:

 
    {{liveStream.title}}

user_8661624 · Answer

you can't call {{liveStream?.title}} directly because the api returns an array of livestream. You can do {{liveStream['title']}} however not the best approach. I would suggest using ng-for


  Livestream
  
      {{stream.title}}

you can find more example in angular docs

user_15866744 · Answer

As other answers pointed out the problem, it was because i get an array and wasn't looping over it, so i just assigned array brackets to my observable types in my service file and component file, looped over it and it works now.

//TS file //
export class LivestreamComponent implements OnInit {
liveStream!: Stream[];

// SERVICE FILE //
getLiveStream(id:number):Observable {
  const url = `https://jsonplaceholder.typicode.com/albums/1/photos?id=${id}`;
  return this.http.get(url);
  }


  Livestream
  
     {{liveStream.id}} 
      {{liveStream.title}}

ANGULAR: Can't get my data to show on my HTML file

3 Answers