将json解析为类对象-angular 5

Question

I'm trying to parse JSON into a class object but it returns always an error.

JSON string - this is what i got in allResourceString

[  
  {  
    "resourceName":"12 strong",
    "resourceType":"Movie",
    "summary":"12 Strong tells the story of the first Special Forces team deployed to Afghanistan after 9/11; under the leadership of a new captain, the team must work with an Afghan warlord to take down for the Taliban.",
    "director":"Nicolai Fuglsig",
    "length":130,
    "yearDate":2018,
    "uploadDate":"2018-04-20T21:00:00.000Z",
    "totalGrade":0,
    "img":"XkFtZTgwNjY2NDczNDM@._V1_SY1000_CR0,0,674,1000_AL_.jpg",
    "genre":"Action,Drama,History"
  },
  ...
]

class:

export class Resource {

    public resourceName: string;
    public resourceType: string;
    public summary: string;
    public director: string;
    public length: number;
    public yearDate: number;
    public uploadDate: Date;
    public totalGrade: number;
    public img: string;
    public genre: string;
}

parse JSON:

 allResource: Array<Resource>;
 i: number;

  constructor(private httpService: HttpService) { }

  ngOnInit() {
    this.httpService.httpGet('')
      .subscribe(
      (response) => {
        this.allResourceString = response.text();
        this.allResource = <Array<Resource>>JSON.parse(this.allResourceString);
      },
      (error) => console.log(error),
    );    

    for (this.i = 0; this.i < this.allResource.length; this.i++) {
        ...
    }
}

It's always return

ERROR TypeError: Cannot read property 'length' of undefined at HomeComponent.ngOnInit (home.component.ts:35)

Answer 1

httpGet returns an Observer, and subscribing to an Observer is an asynchronous method. Async means that the code will bypass that function's execution and move to the next code, and run the callback functions defined in it once your HTTP request is finished.

You need to take your for loop below it and put it in the success callback.

parse JSON:

ngOnInit() {
    this.httpService.httpGet('')
      .subscribe(
      (response) => {
        this.allResourceString = response.text();
        this.allResource = <Array<Resource>>JSON.parse(this.allResourceString);

        for (this.i = 0; this.i < this.allResource.length; this.i++) {
        ...
        }
      },
      (error) => console.log(error),
    );