Javascript 将json解析为类对象-angular 5

我试图将JSON解析为类对象，但它总是返回一个错误

JSON字符串-这是我在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"
  },
  ...
]

类别：

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;
}

解析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++) {
        ...
    }
}

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),
    );    

allResource:Array；
i：编号；
构造函数（私有httpService:httpService）{}
恩戈尼尼特（）{
this.httpService.httpGet（“”）
.订阅(
（回应）=>{
this.allResourceString=response.text（）；
this.allResource=JSON.parse（this.allResourceString）；
},
（错误）=>console.log（错误），
);    
for（this.i=0；this.i

它总是回来的

错误类型错误：无法读取未定义的属性“length” 在HomeComponent.ngOnInit（home.component.ts:35）

---

httpGet返回一个观察者，订阅观察者是一种异步方法。Async意味着代码将绕过该函数的执行并移动到下一个代码，并在HTTP请求完成后运行其中定义的回调函数

您需要将for循环置于其下方，并将其放入成功回调中

解析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++) {
        ...
    }
}

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),
    );    

ngOnInit（）{
this.httpService.httpGet（“”）
.订阅(
（回应）=>{
this.allResourceString=response.text（）；
this.allResource=JSON.parse（this.allResourceString）；
for（this.i=0；this.iconsole.log（错误），
);    

this.allResource=>JSON.parse（…

是无效语法。这是因为

this.allResource

在订阅中设置。这意味着它是异步执行的。您的

for

循环在该订阅之外，这意味着它在

this.allResource

设置之前执行。此外，您可以使用response.json（）而不是response.text（），它将自动为您解析它，因此无需调用JSON.parse