I am in need of calling a web service by providing inputs and using POST method. The response from the service will be a JSON array consisting of objects. My goal is to gather these objects into an Angular Array of Objects and present them on the webpage.
However, instead of displaying the actual values of the objects, the key/values of "Subscribe" are being printed. The val within http.post does display the correct values. I am uncertain if an array of Azureblob objects is being created with
return this.http.post<Azureblob[]>(this.serverUrl...Any assistance on this matter would be greatly appreciated.
https://i.sstatic.net/c2ibT.png
model
export class Azureblob {
blobName: string;
blobURL: string;
blboMimeType: string;
}
service
getAllBlobs() {
const headers = new HttpHeaders({
'Content-Type': 'application/json',
'Accept' : 'application/json'
});
return this.http.post<Azureblob[]>(this.serverUrl,
JSON.stringify({
"acountName": "abc",
"acountKey": "def",
"container":"ghi",
}),{headers: headers}).subscribe(
(val) => {
console.log("POST call successful value returned in body",
val);
},
response => {
console.log("POST call in error", response);
},
() => {
console.log("The POST observable is now completed.");
});
}
pipe
@Pipe({
name: 'keys'
})
export class KeysPipe implements PipeTransform {
transform(value: {}): string[] {
if (!value) {
return [];
}
return Object.keys(value);
}
}
component
blobsList : any;
constructor(private azureblobService : AzureblobService) { }
ngOnInit() {
this.getAllBlobs();
}
getAllBlobs() : void {
this.blobsList = this.azureblobService.getAllBlobs();
}
component html
<div>
<ul>
<li *ngFor="let key of blobsList | keys">
{{key}}
</li>
</ul>
</div>