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

Posted 2023-03-13

【中文标题】无法读取未定义的属性“URL” - 访问 JSON 对象

【英文标题】：Cannot read property 'URL' of undefined - accessing JSON object

【发布时间】：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://[e-mail]"
,

  "MainReport": "BBB",
  "SubReport": "bbb",
   "URL": "https://[e-mail]"
,

  "MainReport": "CCC",
  "SubReport": "ccc",
   "URL": "https://[e-mail]"



 ]

【问题讨论】：

而不是alert(this.datas);，console.logthis.datas的序列化json来检查服务是否真的返回了你正在寻找的东西。

@SayanPal 这也在打印 [object Object]

这似乎不对，因为console.log(JSON.stringify(this.data)) 应该显示this.data 的json 表示。你确定要这样做吗？

不，它只打印 [object Object]..我重新检查了..我可能哪里出错了？

这真的很奇怪。在那种情况下，我不确定这里发生了什么。我建议您在浏览器中调试您的应用程序并检查对象。除此之外，我真的没有任何其他的指点。

【参考方案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 中查找异步编程?