How to update array values inside httpClient method in angular14

Question

Trying to update the array value using the httpClient method. But not working properly. How to get that updated array value outside of httpclient method.If anyone knows please help to find the solution.

app.component.ts:

  public allData = ['Van1', 'Hills2', 'Root3'];
  constructor(private httpClient: HttpClient) {}

  ngOnInit(): void {
     this.httpClient.get<string[]>('../assets/data.json').subscribe((data) => {
     this.allData = data;
    });

    console.log(this.allData); // it should be data.json data
  }

Demo : https://stackblitz.com/edit/angular-ivy-zpvafg?file=src%2Fapp%2Fapp.component.ts

Why are you using http client to fetch a JSON file from the assets folder? Why don't you just simply import the JSON file? — Allan Juan, Jul 12 '22 at 13:52
@AllanJuan: Json data is coming from the server. That's why i am using httpClient method — EMahan K, Jul 12 '22 at 13:58
You're logging the first value of the array because the `console.log` statement executes before the `subscribe` callback. — D M, Jul 12 '22 at 14:07
Does this answer your question? [Angular 2+ wait for subscribe to finish to update/access variable](https://stackoverflow.com/questions/50951779/angular-2-wait-for-subscribe-to-finish-to-update-access-variable) — D M, Jul 12 '22 at 14:08

score 0 · Answer 1 · answered Jul 12 '22 at 14:18

0

You should print the console log inside the httpClient subscribe. Try this you will get the updated data.

 ngOnInit(): void {
         this.httpClient.get<string[]>('../assets/data.json').subscribe((data) => {
         this.allData = data;
    console.log(this.allData); // it should be data.json data
        });
    
        
      }

answered Jul 12 '22 at 14:18

perumal N

641
2
10
27

I want to use this data outside of httpclient method – EMahan K Jul 12 '22 at 14:26
Then you have to pass the value to another method once data received – perumal N Jul 12 '22 at 14:26
Or store it in behavior subject and subscribe it when value changed – perumal N Jul 12 '22 at 14:28
What is the purpose of you need it in outside? @EMahanK – perumal N Jul 12 '22 at 14:28

score 0 · Answer 2 · answered Jul 12 '22 at 14:24

Your component shouldn't handle any http requests, for that, you need to use a service.

@Injectable({...})
export class MyService {
   constructor(private http: HttpClient) {}   

   getData(): Observable<string[]> {
     return this.http.get<string[]>('../assets/data.json');
   }
}

Then, in your component, in order to get the updated data list, you can either subscribe within the component:

@Component({...})
export class MyComponent implements OnInit {
  constructor(private myService: MyService){}

  ngOnInit(): void {
    this.myService.getData().subscribe(data => console.log('Response: ', data));
  }
}

Or let the template HTML if necessary to handle the response by using the async pipe:

@Component({...})
export class MyComponent implements OnInit {
  theDataFromTheBackend$!: Observable<string[]>;

  constructor(private myService: MyService){}

  ngOnInit(): void {
    this.theDataFromTheBackend$ = this.myService.getData();
  }
}

<ng-container *ngIf="theDataFromTheBackend$ | async as result">
  <div> {{ result | json }} </div>
</ng-container>

Additionally, when you subscribe to any observable, that piece of code in that moment will execute some time later because is asynchronous:

someFunction(): void {
  console.log(1);
  
  this.myservice.getData().subscribe(console.log(2));

  console.log(3);
}

The output from above will be 1, 3, 2

Can you edit my stackblitz? – EMahan K Jul 12 '22 at 16:03 — EMahan K, Jul 12 '22 at 16:03

How to update array values inside httpClient method in angular14

2 Answers2