I got a object object and cant select the items-CodePudding

I get a json-Response with values and add this to the interface. But I cant select them in the html-page.

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

import gamejson from '../../assets/data/gametest.json';

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) {

    }

    ngOnInit(): void {
      this.gameid = parseInt( this.route.snapshot.paramMap.get('id') as string );
      
      this.getJSON(this.gameid).subscribe(data => {
        this.gamedetail = data;
        console.log(this.gamedetail);
    });
    }

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

}

Here is the html for this:

<h1>{{ gamedetail.dontfindanykey }}</h1>>

I can select the gamedetail.title (for example). But i can't select title or description or else. In the log would the complete json be viewed

This is the json-response that I get from the server:

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

CodePudding user response：

this is the problematic line;

gamedetail: GAMEDETAIL[]= [];

gamedetail's type is array, you're assigning object to it. You can't read array.title.

This will solve the problem, gamedetail isn't an array, your response json is object;


gamedetail: GAMEDETAIL;