How to store httpClient.get data and use it after read

Question

I have been trying to read a text file and store the data and use it later but once the scope of variable is over the variable gets cleared. I have been trying to utilize the data throughout the project and tried to create a global variable but still it's not useful

import { Component, OnInit,AfterViewInit} from '@angular/core';
import { HttpClient,HttpHeaders, HttpResponse } from '@angular/common/http';
import * as fs from 'fs';import { join } from 'path';

export interface PeriodicElement {
  S_No: number;
  name: string;
  weight: number;
  symbol: string;
}

const ELEMENT_DATA: PeriodicElement[] = [
  {S_No: 1, name: 'Hydrogen', weight: 1.0079, symbol: 'H'},
  {S_No: 2, name: 'Helium', weight: 4.0026, symbol: 'He'},
  {S_No: 3, name: 'Lithium', weight: 6.941, symbol: 'Li'},
  {S_No: 4, name: 'Beryllium', weight: 9.0122, symbol: 'Be'},
  {S_No: 5, name: 'Boron', weight: 10.811, symbol: 'B'},
  {S_No: 6, name: 'Carbon', weight: 12.0107, symbol: 'C'},
  {S_No: 7, name: 'Nitrogen', weight: 14.0067, symbol: 'N'},
  {S_No: 8, name: 'Oxygen', weight: 15.9994, symbol: 'O'},
  {S_No: 9, name: 'Fluorine', weight: 18.9984, symbol: 'F'},
  {S_No: 10,name: 'Neon', weight: 20.1797, symbol: 'Ne'},
];

@Component({
  selector: 'app-status-details',
  templateUrl: './status-details.component.html',
  styleUrls: ['./status-details.component.scss'],
})
export class StatusDetailsComponent {

  dataVal:any ='';
  displayedColumns: string[] = ['S_No', 'name', 'weight', 'symbol'];
  dataSource = ELEMENT_DATA;

  constructor(private httpClient: HttpClient) {
   }

  ngOnInit(): void {
  

  };
  ngAfterViewInit():void{
     this.sampleTest();
  }


  sampleTest()
  {
    const url:string = 'assets/tempFile.txt'
    this.httpClient.get(url, { responseType: 'blob', observe: 'response' }).subscribe((value:         HttpResponse<Blob>) => {
      const data = new Blob([value.body as Blob], {type: value.body?.type});
      const reader = new FileReader();
      reader.readAsText(data);

      reader.onload = (content) => {
        const textInFile = reader.result as string;
    
        this.dataVal = textInFile;
        console.log("TEST",this.dataVal)
      };
    });
  }
}

this post explain how to use service for store countries: https://stackoverflow.com/questions/61131817/best-way-to-store-and-process-json-data-from-httpclient-get-request-in-angular — dgzornoza, Aug 21 '23 at 07:05

score 0 · Answer 1 · answered Aug 18 '23 at 13:05

0

You could try to retrieve the data from a Service (providedIn: 'root', so it is a singleton that will not be removed and therefore the data will not be removed) instead of a Component and then use RxJs shareReplay Method to ensure you are not recalling the backend when you don't need to.

answered Aug 18 '23 at 13:05

Ismael

11
2

Hi I am new to angular, can you provide any sample so that it would be easy for me to understand – ronKing28 Aug 21 '23 at 04:22
A Service looks similar to a component. You could rename your Component to have a name ending with Service, exchange the current @Component Annotation with ``` @Injectable({ providedIn: 'root', }) ``` To use shareReplay u can call `.pipe(shareReplay(1))` on your request. Also remove the ng functions and init the data in the constructor – Ismael Aug 21 '23 at 12:15

How to store httpClient.get data and use it after read

1 Answers1