无法读取未定义的属性“URL” - 访问 JSON 对象答案

【问题标题】：Cannot read property 'URL' of undefined - accessing JSON object无法读取未定义的属性“URL” - 访问 JSON 对象
【发布时间】：2018-02-04 07:50:57
【问题描述】：

从app.component.ts 文件中，我从alert(this.datas); 以[Object Object] 的形式取回数据，但alert(this.datas.ReportDtDataForMAPP); 给出空白结果，因此当我尝试从UI 访问报告URL 时，我收到此错误：Cannot read property 'URL' of undefined。

有人可以提供解决方案吗？

以下是必要的文件：

app.component.ts 类（摘录）

//...
//Lines of code
//...

this.myMobileDataService.checkAuthorization(this.enterpriseId,v2Token)
    .subscribe(
        response => {
            this.datas = response;

            JSON.stringify(this.datas);

            alert(this.datas);

            alert(this.datas.ReportDtDataForMAPP);

            if(this.datas == null || this.datas == ""){
                this.nav.setRoot(this.accessDeniedPage, {showFooter : false});
            } else {
                this.nav.setRoot(this.homePage, {showFooter : false});
            }
        },
        err => {
            console.log("Error here!:"+err);           
        }
        );

    },


//...
//Lines of code
//...

OpenReport(report : any)
{
        let list = this.datas.ReportDtDataForMAPP;
        let newList = list.filter((t) => t.SubReport == report);
        JSON.stringify(newList)
        this.myURL = newList[0].URL;
        this.openUrl(this.myURL);

}

//...
//Lines of code
//...

app.html（摘录）

 //...
 //Lines of code
 //...
 <ion-grid>

    <ion-row>
      <ion-col class="reportHeader reportHeaderPadding"><strong>AAA</strong></ion-col>
    </ion-row>
    <ion-row text-center>
      <ion-col (click)="OpenReport('MURLAAA')" tappable><img src = "assets/icon/AAA.png" alt = "Image Not Available" class = "homeImages"></ion-col>
      <ion-col (click)="OpenReport('MURLBBB')" tappable> <img src = "assets/icon/BBB.png" alt = "Image Not Available" class = "homeImages"></ion-col>
       <ion-col (click)="OpenReport('MURLCCC')" tappable> <img src = "assets/icon/CCC.png" alt = "Image Not Available" class = "homeImages"></ion-col>
    </ion-row>
    <ion-row text-center class="addBorder">
      <ion-col (click)="OpenReport('MURLAAA')" tappable class="reportName">AAA</ion-col>
      <ion-col (click)="OpenReport('MURLBBB')" tappable class="reportName">BBB</ion-col>
      <ion-col (click)="OpenReport('MURLCCC')" tappable class="reportName">CCC</ion-col>
    </ion-row>

    //...
    //Lines of code
    //...

myMobileDataService.ts 类

import { Injectable } from '@angular/core';
import { Http } from '@angular/http';
import 'rxjs/add/operator/map';
import { Headers,RequestOptions } from  '@angular/http';
import { Observable } from 'rxjs';
import { Platform } from 'ionic-angular';


@Injectable()
export class myMobileDataService {

  constructor(private http: Http, private platform: Platform) {}

  public checkAuthorization( _enterpriseID: string, _token : any ) : Observable<any>{

    let details = {
                     "EntId" : "_enterpriseID"
                   };

    let body = JSON.stringify(details);

    let headers = new Headers(
        {
          'Content-Type': 'application/json',  
          'Authorization' : 'bearer ' +  _token
        }
      );

    let options = new RequestOptions({headers:headers});

    return this.http.post('myURL',body,options)
             .map( (res) => res.json())


  }

}

http post 请求以这种形式提供数据：

ReportDtDataForMAPP:[
{
  "MainReport": "AAA",
  "SubReport": "aaa",
   "URL": "https://aaa@aaa.com"
},
{
  "MainReport": "BBB",
  "SubReport": "bbb",
   "URL": "https://bbb@bbb.com"
},
{
  "MainReport": "CCC",
  "SubReport": "ccc",
   "URL": "https://ccc@ccc.com"
}


 ]

【问题讨论】：

而不是alert(this.datas);，console.logthis.datas的序列化json来检查服务是否真的返回了你正在寻找的东西。
@SayanPal 这也在打印 [object Object]
这似乎不对，因为console.log(JSON.stringify(this.data)) 应该显示this.data 的json 表示。你确定要这样做吗？
不，它只打印 [object Object]..我重新检查了..我可能哪里出错了？
这真的很奇怪。在那种情况下，我不确定这里发生了什么。我建议您在浏览器中调试您的应用程序并检查对象。除此之外，我真的没有任何其他的指点。

标签： json angular typescript ionic2

【解决方案1】：

当这个函数被调用时：

OpenReport(report : any)
{
        let list = this.datas.ReportDtDataForMAPP;
        let newList = list.filter((t) => t.SubReport == report);
        JSON.stringify(newList)
        this.myURL = newList[0].URL;
        this.openUrl(this.myURL);

}

数据未加载，因为subscribe 是异步的：https://angular.io/guide/http

在 javascript 中查找异步编程?

【讨论】：

更多