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
– Allan Juan, Commented Jul 12, 2022 at 13:52
@AllanJuan: Json data is coming from the server. That's why i am using httpClient method — EMahan K
– EMahan K, Commented Jul 12, 2022 at 13:58
You're logging the first value of the array because the console.log statement executes before the subscribe callback. — D M
– D M, Commented Jul 12, 2022 at 14:07
Does this answer your question? Angular 2+ wait for subscribe to finish to update/access variable — D M
– D M, Commented Jul 12, 2022 at 14:08

perumal N · Accepted Answer · 2022-07-12 14:18:42Z

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, 2022 at 14:18

perumal N

6512 gold badges10 silver badges27 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

EMahan K Over a year ago

I want to use this data outside of httpclient method

perumal N Over a year ago

Then you have to pass the value to another method once data received

perumal N Over a year ago

Or store it in behavior subject and subscribe it when value changed

perumal N Over a year ago

What is the purpose of you need it in outside? @EMahanK

Andres2142 · Accepted Answer · 2022-07-12 14:24:09Z

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

Collectives™ on Stack Overflow

How to update array values inside httpClient method in angular14

2 Answers 2

4 Comments

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

4 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related