I have a JSON array with 4 elements in angular 7, but it shows 0 when I asked for it`s length - arrays

Question

I have an API that responds a JSON object to request. Everything looks normal but when I want to access to elements of this JSON Array it shows 0 elements instead of true value.
it's my request :
private request(type: 'getall'|'getonebyid'|'addnew'|'editbyid'|'deleteonebyid',
mp?: IMeasurementInterfaces,
id?: string): Observable<any> {
let base;
this.serverUri = 'http://localhost:3000'; // localhost
if (type === 'getall') {
base = this.http.get<MeasurementDetails[]>(`${this.serverUri}/mea/${type}`);
}
const request = base.pipe(
map((data: any) => {
return data;
})
);
return request;
}
call request function :
public getall(): Observable<MeasurementDetails[]> {
return this.request('getall');
}
filling mpserv declared in component.ts file:
this.mpserv.getall().subscribe(
x => {
x.forEach(element => {
this.mp.push(element);
});
},
err => console.error('Observer got an error: ' + err),
() => console.log('Observer got a complete notification')
);
when I request console.log(this.mpserv) it responds this:
I used this.mp as data source of data table :
<div class="measurement-type-grid">
<div class="measurement-type-list">
<table mat-table [dataSource]="dataSource">
<!-- Position Column -->
<ng-container matColumnDef="position">
<th mat-header-cell *matHeaderCellDef> No. </th>
<td mat-cell *matCellDef="let element"> {{element.position}} </td>
</ng-container>
<!-- title Column -->
<ng-container matColumnDef="title">
<th mat-header-cell *matHeaderCellDef> title </th>
<td mat-cell *matCellDef="let element"> {{element.title}} </td>
</ng-container>
<!-- description Column -->
<ng-container matColumnDef="description">
<th mat-header-cell *matHeaderCellDef> description </th>
<td mat-cell *matCellDef="let element"> {{element.description}} </td>
</ng-container>
<!-- Symbol Column -->
<ng-container matColumnDef="symbol">
<th mat-header-cell *matHeaderCellDef> Symbol </th>
<td mat-cell *matCellDef="let element"> {{element.symbol}} </td>
</ng-container>
<!-- Edit Column -->
<ng-container matColumnDef="edit">
<th mat-header-cell *matHeaderCellDef> Edit </th>
<td mat-cell *matCellDef="let element">
<button mat-icon-button color="primary">
<mat-icon aria-label="Edit data">edit</mat-icon>
</button>
</td>
</ng-container>
<!-- Delete Column -->
<ng-container matColumnDef="delete">
<th mat-header-cell *matHeaderCellDef> Delete </th>
<td mat-cell *matCellDef="let element">
<button mat-icon-button color="primary">
<mat-icon aria-label="Delete data">delete_forever</mat-icon>
</button>
</td>
</ng-container>
<!-- Add New Column -->
<ng-container matColumnDef="add new">
<th mat-header-cell *matHeaderCellDef> Add New </th>
<td mat-cell *matCellDef="let element">
<button mat-icon-button color="primary">
<mat-icon aria-label="Delete data">add_circle</mat-icon>
</button>
</td>
</ng-container>
<tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
<tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr>
</table>
<mat-paginator [pageSizeOptions]="[5, 10, 20]" showFirstLastButtons></mat-paginator>
</div>
</div>
I used this function to fill data to data source:
filltoelements(mdata: MeasurementDetails[]) {
// console.log(mdata);
if (!mdata) {
console.log('data is undefined!!!!');
} else {
let i: number;
i = -1;
mdata.forEach(element => {
i++;
this.ELEMENT_DATA[i].position = i + 1;
this.ELEMENT_DATA[i].title = element.measureTitle;
this.ELEMENT_DATA[i].description = element.measureDescription;
this.ELEMENT_DATA[i].symbol = element.measureSymbol;
this.ELEMENT_DATA[i].edit = 'edit';
this.ELEMENT_DATA[i].delete = 'delete';
this.ELEMENT_DATA[i].addNew = 'addNew';
});
}
}
and I defined it in component.ts:
displayedColumns: string[] = ['position', 'title', 'description', 'symbol', 'edit', 'delete', 'add new'];
dataSource = new MatTableDataSource<MeasureTypeElemetns>(this.ELEMENT_DATA);
and returned 0 as array length and my data table is empty:
do you have any idea?

Answer 1

Thanks to pjlamb12, Gilsdav and AjayReddy.
I should do it within subscribe method. so my code should be something like this :
this.mpserv.getall().subscribe(
x => {
x.forEach(element => {
this.mp.push(element);
});
this.filltoelements(this.mp);
},
err => console.error('Observer got an error: ' + err),
() => console.log('Observer got a complete notification')
);
then it worked properly.