Read data from own api url and use a interface

Issue

I try to get the json-data from a api-server. I can't add this to the variable. I got the error

Type is missing the following properties from Type "Observable" missing the properties from type "GAMELIST[]": "length, pop, push, concat" und 27 weitere.ts(2740)

Where I is my mistake?

import { Component, OnInit } from '@angular/core';
import { Router } from '@angular/router';
import { HttpClient } from '@angular/common/http';
import { Observable, throwError } from 'rxjs';
import { catchError, retry } from 'rxjs/operators';

import gamelistjson from '../../assets/data/gamelist.json';

interface GAMELIST {
    id: number,
    title: string,
    releasedate: number,
    shortdescription: string,
    adddate: string,
    changedate: string,
    tags: any
}

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

  private data:any = [];
  games: GAMELIST[] = this.getJSON();
  idspiel: number = 0;
  

  constructor(private router: Router, private http: HttpClient) { 
      this.getJSON().subscribe(data => {
          console.log(data);
      });
  }

  ngOnInit(): void {
  }

  public getJSON(): Observable<any> {
    return this.http.get("https://example.org/api/gamelist");
  }

  onSelect(game: any){
    this.router.navigate(['/spiel', game.id, game.title]);
  }
}

Solution

I think this is the problematic line.

games: GAMELIST[] = this.getJSON();

this.getJson() returns an observable and you're trying to assign observable to GAMELIST[] type. You should assign it inside the subscription

Here is the changed code;

import { Component, OnInit } from '@angular/core';
import { Router } from '@angular/router';
import { HttpClient } from '@angular/common/http';
import { Observable, throwError } from 'rxjs';
import { catchError, retry } from 'rxjs/operators';

import gamelistjson from '../../assets/data/gamelist.json';

interface GAMELIST {
    id: number,
    title: string,
    releasedate: number,
    shortdescription: string,
    adddate: string,
    changedate: string,
    tags: any
}

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

  private data:any = [];
  games: GAMELIST[];
  idspiel: number = 0;
  

  constructor(private router: Router, private http: HttpClient) { 
    
  }

  ngOnInit(): void {
  this.getJSON().subscribe(data => {
          this.games = data;
      });
  }

  getJSON(): Observable<GAMELIST[]> {
    return this.http.get("https://example.org/api/gamelist");
  }

  onSelect(game: any){
    this.router.navigate(['/spiel', game.id, game.title]);
  }
}

Answered By - Talha Akca