Within the service.ts module, I am fetching data from Azure Blobstorage and attempting to read its contents.
service.ts
import { Injectable } from '@angular/core';
import { environment } from '../../environments/environment';
import { JsonData } from '../models/jsondata';
import {
BlobServiceClient,
BlobDownloadResponseModel
} from "@azure/storage-blob";
@Injectable({
providedIn: 'root'
})
export class JsonDataService {
private account = environment.ACCOUNT_NAME;
private sas = environment.SAS;
private blobServiceClient
constructor() { this.blobServiceClient = new BlobServiceClient(`https://${this.account}.blob.core.windows.net${this.sas}`) }
getData(): Promise<JsonData[]> {
return new Promise(resolve => {
const containerName = "output2";
const containerClient = this.blobServiceClient.getContainerClient(containerName);
//list blobs
let i = 1;
async function main() {
i = 1;
for await (const blob of containerClient.listBlobsFlat()) {
// console.log(`Blob ${i++}: ${blob.name}`);
const blockBlobClient = containerClient.getBlockBlobClient(blob.name);
console.log(blockBlobClient)
const downloadBlockBlobResponse = await blockBlobClient.download(0);
const download = await blobToString(await downloadBlockBlobResponse.blobBody)
console.log(downloadBlockBlobResponse)
//console.log("Downloaded blob content",download);
console.log(download)
return download
}
}
//BROWSER ONLY A HELPER METHOD USED TO CONVERT A BROWSER BLOB INTO STRING
async function blobToString(blob: Blob): Promise<string> {
const fileReader = new FileReader();
return new Promise((resolve, reject) => {
fileReader.onloadend = (ev: any) => {
JSON.parse(ev.target!.result)
resolve(ev.target!.result);
};
fileReader.onerror = reject;
fileReader.readAsText(blob);
});
}
main().catch((err) => {
console.error("Error running sample:", err.message);
})
})
}
}
After testing this function with console.log, it's returning the correct data.
Now, I am attempting to access this function within the test.component.ts component by using ngOnit to call the function. However, it seems to only return meta data instead of the actual values returned by the getData() function.
test.component.ts
import { Component, OnInit, Input } from '@angular/core';
import { JsonDataService } from 'src/app/services/json-data.service';
import { JsonData } from 'src/app/models/jsondata';
@Component({
selector: 'app-test',
templateUrl: './test.component.html',
styleUrls: ['./test.component.scss'],
providers: [JsonDataService]
})
export class TestComponent implements OnInit {
@Input() title: string;
jsondatas: Array<JsonData> = [];
jsondata: JsonData;
name: String;
timestamp: number;
value: number;
//constructor() { }
constructor(private jsonService: JsonDataService) {
}
ngOnInit(): void {
this.jsonService.getData()
.then(results => this.jsondatas = results);
console.log(this.jsonService)
}
}
The NgOnit result is as follows: console.log(this.jsonService
However, the expected output should include the defined jsondata properties such as name, timestamp, value