Never[] is missing some properties

Question

I got a simple JSON response with a single object. And I like to view this on the HTML page. But I got the error:

src/app/games/game.component.ts:35:7 - error TS2740: Type 'never[]' is missing the following properties from type 'GAMEDETAIL': id, title, releasedate, description, and 6 more

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

interface GAMEDETAIL {
  id: number,
  title: string
  releasedate: number
  description: string,
  adddate: string,
  changedate: string,
  pdffile: string,
  youtubelink: string,
  images: any,
  producer: any
}

@Component({
  selector: 'app-game',
  templateUrl: './game.component.html',
  styleUrls: ['./game.component.css']
})

export class GameComponent implements OnInit {

  private data:any = [];  
  gamedetail:GAMEDETAIL;
  gameid: number = 0;

    constructor(private route: ActivatedRoute, private http:HttpClient) {
      **this.gamedetail = [];**
    }

    ngOnInit(): void {
      this.gameid = parseInt( this.route.snapshot.paramMap.get('id') as string );

      this.getJSON(this.gameid).subscribe(data => {
        console.log(this.gamedetail.title);

    });
    }

    getJSON(spielid: Number): Observable<GAMEDETAIL[]> {
      return this.http.get<GAMEDETAIL[]>("https://example.org/api/gamedetail/" + spielid);
    }

}

I got in the console the following JSON-Data:

{
    "id":1,
    "title":"Ligretto",
    "releasedate":2000,
    "producer":[
    {
        "company":"Schmidt",
        "url":"https://example.org"
    }
    ],
    "pdffile":"https://example.org",
    "discription":"Das ist die Beschreibung zum Spiel",
    "images":[
    {
        "position":0,
        "imagefile":"https://example.org"
    },
    {
        "position":1,
        "imagefile":"https://example.org"
    }
    ],
    "youtubelink":"https://example.org",
    "adddate":"2021-12-22 22:22:44",
    "changedate":"2022-01-11 11:11:20"
}

I like to check if I can log with the console the following line:

console.log(this.gamedetail.title);

But I can't compile it.

score 0 · Accepted Answer · answered Feb 08 '22 at 00:52

From your attached JSON, it is a single object.

There are a few errors to be pointed out:

Error 1: gamedetail declared as GAMEDETAIL type, but assigned with [] (empty array).

You shouldn't assign gamedetail with [] as it conflicts with its type.

gamedetail:GAMEDETAIL;

constructor(private route: ActivatedRoute, private http:HttpClient) {
  **this.gamedetail = [];**
}

Solution for Error 1

Remove the assigned value from constructor.

constructor(private route: ActivatedRoute, private http:HttpClient) { }

Side note: You should perform initialization in ngOnInit() instead of in constructor, check out this Difference between Constructor and ngOnInit.

Error 2: http.get should expect to receive GAMEDETAIL object.

As your JSON returns single object, http.get shouldn't expect to receive an GAMEDETAIL array and return Observable of GAMEDETAIL array.

getJSON(spielid: Number): Observable<GAMEDETAIL[]> {
  return this.http.get<GAMEDETAIL[]>("https://example.org/api/gamedetail/" + spielid);
}

Solution for Error 2

Change the getJSON method as below:

getJSON(spielid: Number): Observable<GAMEDETAIL> {
  return this.http.get<GAMEDETAIL>("https://example.org/api/gamedetail/" + spielid);
}

Error 3: Missing assign the value to gamedetail in subscribe.

this.getJSON(this.gameid).subscribe((data) => {
  console.log(this.gamedetail.title);
});

Solution for Error 3

Add missing assign value to gamedetail.

this.getJSON(this.gameid).subscribe((data) => {
  this.gamedetail = data;
  console.log(this.gamedetail.title);
});

Sample Demo on StackBlitz

Never[] is missing some properties

1 Answers1