Search code examples
jsonangulartypescriptget

Can't get data from json file by GET request in Angular


I need to get from json GroupResult object, but a am new at that and am thinking, that I doing it wrong.

My class:

 export class GroupResult {
  Id!: number;
  Lecturer!: string;
  GroupName!: string;
  Subjects!: SubjectStatsStudent[];
}

export class SubjectStatsStudent {
  Id!: number;
  Name!: string;
  StudentResults!: StudentResult[];
}

export class StudentResult {
  Id!: number;
  Name!: string;
  Number!: number;
  LabPass!: number;
  LetionPass!: number;
  AllPass!: number;
  LabAvg!: number;
  TestAvg!: number;
  Rating!: number;
}

I tried to do it like that:

(service.ts)

import {HttpClient} from '@angular/common/http';
import {Injectable} from '@angular/core';
import { Observable } from 'rxjs';
import { GroupResult } from '../model/group.results';

@Injectable({
    providedIn: 'root'
})

export class GroupService {
    getTest(): Observable<GroupResult> {
        return this.http.get<GroupResult>('../../assets/testGroup.json');
      }
}

(group.component.ts)

  ngOnInit(): void {
    this.groupService.getTest().subscribe((res: GroupResult) => this.Group = res);
    this.SelectedSubject = this.Group.Subjects[0];
  }

(testGroup.json)

{
    "Id": "777",
    "Lecturer": "Ivanov",
    "GroupName": "10701218",
    "Subjects": [
      {
        "Id": "5",
        "Name": "five",
        "StudentResults": [
          {
            "Id": "5",
            "Name": "five",
            "Number": "1",
            "LabPass": "1",
            "LectionPass": "1",
            "AllPass": "1",
            "LabAvg": "1",
            "TestAvg": "1",
            "Rating": "1"
          },
          {
            "Id": "3",
            "Name": "two",
            "Number": "2",
            "LabPass": "2",
            "LectionPass": "2",
            "AllPass": "2",
            "LabAvg": "2",
            "TestAvg": "2",
            "Rating": "2"
          },
          {
            "Id": "7",
            "Name": "tree",
            "Number": "3",
            "LabPass": "3",
            "LectionPass": "3",
            "AllPass": "3",
            "LabAvg": "3",
            "TestAvg": "3",
            "Rating": "3"
          }
        ]
      },

      {
        "Id": "7",
        "Name": "f77777e",
        "StudentResults": [

          {
            "Id": "5",
            "Name": "five",
            "Number": "1",
            "LabPass": "1",
            "LectionPass": "1",
            "AllPass": "1",
            "LabAvg": "1",
            "TestAvg": "1",
            "Rating": "1"
          },
          {
            "Id": "3",
            "Name": "two",
            "Number": "2",
            "LabPass": "2",
            "LectionPass": "2",
            "AllPass": "2",
            "LabAvg": "2",
            "TestAvg": "2",
            "Rating": "2"
          },
          {
            "Id": "7",
            "Name": "tree",
            "Number": "3",
            "LabPass": "3",
            "LectionPass": "3",
            "AllPass": "3",
            "LabAvg": "3",
            "TestAvg": "3",
            "Rating": "3"
          }
        ]
      },

      {
        "Id": "3",
        "Name": "fiv333e",
        "StudentResults": [

          {
            "Id": "5",
            "Name": "five",
            "Number": "1",
            "LabPass": "1",
            "LectionPass": "1",
            "AllPass": "1",
            "LabAvg": "1",
            "TestAvg": "1",
            "Rating": "1"
          },
          {
            "Id": "3",
            "Name": "two",
            "Number": "2",
            "LabPass": "2",
            "LectionPass": "2",
            "AllPass": "2",
            "LabAvg": "2",
            "TestAvg": "2",
            "Rating": "2"
          },
          {
            "Id": "7",
            "Name": "tree",
            "Number": "3",
            "LabPass": "3",
            "LectionPass": "3",
            "AllPass": "3",
            "LabAvg": "3",
            "TestAvg": "3",
            "Rating": "3"
          }
        ]
      }


    ]
}

But I have errors like that "Cannot read property 'Subjects' of undefined". So how I understand, my group variable is still undefined/ Please tell me what I am doing wrong?


Solution

  • Try

    ngOnInit(): void {
        this.groupService.getTest().subscribe((res: GroupResult) => {
            this.Group = res;
            this.SelectedSubject = this.Group.Subjects[0];
        });
    }