TypeError：无法读取未定义的属性“地图”<angular 8></angular>

Question

I have an ag-grid populated from a service on click of a Search button , which invokes the API. I am using map() function to create a new object from the original API object. Are filtering and formatting required properties from original when creating a new object? New object is then set to the grid for the data population.

Issue: When I clicked the first time on the Search button, though the Network shows the correct data fetch, nothing is populated to the UI due to the error:

TypeError: Cannot read property 'map' of undefined.

During the second click, data is populated into the Grid perfectly . Note that second click doesn't cause this error .

this._reportersService.getReporters()
            .subscribe(         
                    (data=> this.reporters = data),                       
                    (error => {
                                console.log(error);
                                this.errBlock = true;
                                this.errText = error.message;
                              })
                    )
            var res = {
                gridReporters: this.reporters.map(function(v) {
                  var fullName = v.TITLE+' '+v.FIRST_NAME+' '+v.MIDDLE_NAME+' '+v.LAST_NAME;
                  var address = v.STREET+' '+v.CITY+' '+v.STATE
                  return {
                    FULLNAME: fullName,
                    ADDRESS:address,
                    COUNTRY:v.COUNTRY,
                    POSTCODE:v.POSTCODE,
                    PHONE:v.PHONE,
                    EMAIL:v.EMAIL,
                    QUALIFICATION:v.QUALIFICATION,
                    INSTITUTION:v.INSTITUTION,
                    DEPARTMENT:v.DEPARTMENT
                  };
                })    


}
  var objString = JSON.stringify(res);
  objString = objString.split('{"gridReporters":').join('');
  objString = objString.split('}]}').join('}]');
  console.log("last str:"+objString);
   this.reporterGridOptions.rowData = JSON.parse(objString);
  this.reporterGridOptions.api.setRowData(this.reporterGridOptions.rowData);
}

Additionally, pls note:

public reporters: Reporters[] ;

export class Reporters {
    REPORTER_ID: string;
    CLIENT_ID: string;
    TITLE: string;
    FIRST_NAME: string;
    MIDDLE_NAME:string;
    LAST_NAME: string;
    STREET: string;
    CITY: string;
    STATE: string;
    COUNTRY: string;
    PHONE: string;
    EMAIL: string;
    INSTITUTION: string;
    DEPARTMENT: string;
    QUALIFICATION: string;
    CREATED_BY:string;
    CREATED_DATE:Date;
    IS_PRIMARY_CONTACT:number;
    POSTCODE:string;
    STATUS:string;
    UPDATED_BY:string;
    UPDATED_DATE:string;
    }

All relevant code is enclosed, Pls help me with this. Thanks in advance. ASJ.

Answer 1

When you execute map() function on this.reporters it is undefined,because the subscribe function has not yet executed (asynchronous behaviour of js(ts)).Do something like below.

this._reportersService.getReporters()
            .subscribe(         
                    (data=> {this.reporters = data ; // apply map() function here on this.reporters  }),                       
                    (error => {
                                console.log(error);
                                this.errBlock = true;
                                this.errText = error.message;
                              })
                    )

Answer 2

You should manipulate your data when it is available like:-

const res;
this._reportersService.getReporters()
        .subscribe(         
                (data=> {this.reporters = data;
                 res = {
            gridReporters: this.reporters.map(function(v) {
              var fullName = v.TITLE+' '+v.FIRST_NAME+' '+v.MIDDLE_NAME+' '+v.LAST_NAME;
              var address = v.STREET+' '+v.CITY+' '+v.STATE
              return {
                FULLNAME: fullName,
                ADDRESS:address,
                COUNTRY:v.COUNTRY,
                POSTCODE:v.POSTCODE,
                PHONE:v.PHONE,
                EMAIL:v.EMAIL,
                QUALIFICATION:v.QUALIFICATION,
                INSTITUTION:v.INSTITUTION,
                DEPARTMENT:v.DEPARTMENT
              };
            }) 
           }
          } 
                 ),                       
                (error => {
                            console.log(error);
                            this.errBlock = true;
                            this.errText = error.message;
                          })
                )

Try this

Answer 3

You need to put your code of.map() into the last stage of successfully stage. Like this..

 .subscribe(
    data => {
      this.reporters = data;
      this.isWait = true;
    },
    err => {
      this.errorMessage = err;
      this.isWait = false;
    }  ,
    () =>  {  this.isWait = false;
                  // Your this.reporters.map() code goes here.
              }
  );

First stage of subscribe () is getting api data and passed it to your reporters property.

Second stage for any error handling of which occurred in while Calling data from api.

Third stage is successful stage. Called only when first stage is successfully called. So your reporters property now has all data you needed.

Note here, isWait is Boolean property, used for enabling or disabling Loader/ Spinners indication to user when time consuming to download data from api.