Always[] contains all properties needed

Question

Always[] contains all properties needed

I received a basic JSON response containing a single object. My intention was to display this on an HTML page, but unfortunately I encountered the following 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);
    }

}

Upon checking the console, I found the following JSON Data:

{
    "id":1,
    "title":"Ligretto",
    "releasedate":2000,
    "producer":[
    {
        "company":"Schmidt",
        "url":"https://example.org"
    }
    ],
    "pdffile":"https://example.org",
    "discription":"This is the game's description",
    "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 attempted to log the line below using the console:

console.log(this.gamedetail.title);

However, I encountered issues while trying to compile it.

angular typescript

Answer 1

Answer №1

Based on the JSON provided, it appears to be a single object.

Here are some key errors that need to be addressed:

Error 1: The variable gamedetail is declared as type GAMEDETAIL, but then assigned an empty array [].

It's incorrect to assign an empty array to gamedetail since it conflicts with its type definition.

gamedetail: GAMEDETAIL;

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

Solution for Error 1

Remove the assignment of an empty array in the constructor.

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

Note: It's recommended to initialize variables in the ngOnInit() method instead of the constructor. Refer to this link for more details.

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

Since the JSON returns a single object, the http.get method should not expect to receive an array of GAMEDETAIL and should return an observable of GAMEDETAIL instead.

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

Solution for Error 2

Modify the getJSON method as follows:

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

Error 3: It's missing the assignment of the value to gamedetail within the subscribe method.

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

Solution for Error 3

Make sure to assign the retrieved data to gamedetail within the subscribe method.

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

Here is a sample demo on StackBlitz

Answer 2

Based on the JSON provided, it appears to be a single object.

Here are some key errors that need to be addressed:

Error 1: The variable gamedetail is declared as type GAMEDETAIL, but then assigned an empty array [].

It's incorrect to assign an empty array to gamedetail since it conflicts with its type definition.

gamedetail: GAMEDETAIL;

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

Solution for Error 1

Remove the assignment of an empty array in the constructor.

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

Note: It's recommended to initialize variables in the ngOnInit() method instead of the constructor. Refer to this link for more details.

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

Since the JSON returns a single object, the http.get method should not expect to receive an array of GAMEDETAIL and should return an observable of GAMEDETAIL instead.

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

Solution for Error 2

Modify the getJSON method as follows:

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

Error 3: It's missing the assignment of the value to gamedetail within the subscribe method.

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

Solution for Error 3

Make sure to assign the retrieved data to gamedetail within the subscribe method.

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

Here is a sample demo on StackBlitz

Always[] contains all properties needed

Answer №1

Similar questions

Encountering a ReferenceError stating that HTMLInputElement is not defined while using Angular 4 Universal

Creating Custom Message Boxes with Excel Online Script

When implementing 'useGlobalGuards' in NestJS, remember to exclude endpoints for enhanced security

Oops! TypeScript error TS2740: The type 'DeepPartial<Quiz>[]' is currently missing key properties from type 'Question': id, question, hasId, save, and a few more

How can I convert an XML response to JSON in an Ionic 2 HTTP request

Unable to execute an HTTPS request while in server-side rendering

SignalR Negotiate in AspNetCore 2.2 with Angular consistently triggers a 404 error indicating page not found

Encountered an issue when making an Angular2 HTTP POST request - SyntaxError: JSON input unexpectedly ended

Having trouble with Angular routing when attempting to directly access a specific URL path?

Incorrect tsx date interpretation when dealing with years such as 0022

The function signature '(close: () => void) => ReactElement' cannot be assigned to type 'ReactNode'

Creating a TypeScript constructor for the parent class that accesses the properties of the child class

"RxJS in Angular 2: The elusive map function seems to be missing

Angular HTML prints only halfway down the page when document is printed

What is the process for incorporating a personalized inputComponent JSX <input /> into a react-phone-number-input PhoneInput component?

Implementing the change method in Angular2 and JavaScript

The issue arises when the mat-panel-description is not properly aligned with the shrinking panel

What is the process for sending a GET request with a URL-encoded object in Angular?

The ASP.NET Core 3.0 Web API method consistently encounters null values

Exploring Typescript Reflection: The Importance of Required Parameters and Default Values