The API response is indicating that it is empty, however, upon further examination, it is not

Question

The API response is indicating that it is empty, however, upon further examination, it is not

I created an API that shows a user's followers and following users. Everything is displaying correctly on the screen. However, when I try to use console.log() to display the array it is stored in after calling the method, it shows as an empty array. I'm stuck and not sure what to do next. Can someone help or does anyone else have the same issue? Please let me know.

ngOnInit:

ngOnInit(): void {
    localStorage.setItem("gd", "78F88FC0-7A58-49CD-881E-4B36C5C29B71");
    this.getUsers();
    this.getFollowing();
    this.getFollowers();

    console.log("Followers: ", this.followers)
    console.log("Following: ", this.following)
}

Methods:

getUsers() {
    this._userService.getUsers().subscribe(res => {
      this.users = res;
    })
  }

  getFollowing() {
    this._userService.getFollowing().subscribe(res => {
      this.following = res;
    })
  }

  getFollowers() {
    this._userService.getFollowers().subscribe(res => {
      this.followers = res;
    })
  }

Console:
https://i.sstatic.net/K2mhV.png

HTML output:
https://i.sstatic.net/LswQd.png

javascript angular typescript

Answer 1

Answer №1

I am looking to streamline an answer without revealing too much through the link

Utilizing forkJoin allows us to consolidate multiple calls and obtain the responses in a single subscribe

ngOnInit()
{
    forkJoin(this._userService.getUsers(),
             this._userService.getFollowing(),
             this._userService.getFollowers())
             .subscribe(([users, following, followers]) => {
                   this.users = users;
                   this.following = following;
                   this.followers = followers;
                   console.log(this.users); // Display the value
             });
             console.log(this.users); // This will not have a value outside the subscribe function
}

Keep in mind that it only makes sense to use console.log(this.users) within the subscribe function

Remember: the services return observables, which we then subscribe to in components

Answer 2

I am looking to streamline an answer without revealing too much through the link

Utilizing forkJoin allows us to consolidate multiple calls and obtain the responses in a single subscribe

ngOnInit()
{
    forkJoin(this._userService.getUsers(),
             this._userService.getFollowing(),
             this._userService.getFollowers())
             .subscribe(([users, following, followers]) => {
                   this.users = users;
                   this.following = following;
                   this.followers = followers;
                   console.log(this.users); // Display the value
             });
             console.log(this.users); // This will not have a value outside the subscribe function
}

Keep in mind that it only makes sense to use console.log(this.users) within the subscribe function

Remember: the services return observables, which we then subscribe to in components

The API response is indicating that it is empty, however, upon further examination, it is not

Answer №1

Similar questions

Look into the data with vue.js, but there's not much

Is there a method to bypass the need for app.get() for each static file in express?

The ancient oracle of Delphi and the modern login portal of Microsoft

Is there a way to display only the specific child div within the parent div using JavaScript without affecting the others?

What steps can be taken to initiate Nx Release on the apps/* when modifications are made to the connected libs/* modules?

Strategies for adding elements to a FormArray in Angular 4

uib-datepicker-popup allowing for changing minimum mode dynamically

Tips on eliminating overlapping strokes

jqgrid's date restriction is set to November 30th, 1999 at midnight

Converting Firebase TIMESTAMP values to human-readable date and time

Trigger a re-render in React using setState(null) and forceUpdate()

The fadeIn() and fadeOut() functions solely conceal

Looking to include a new item into an array with the help of AngularJS

Creating a dynamic variable reference for ngModel in Angular 2 and above allows for flexible data binding

Using a personalized domain with a Cloud Function to send a POST request

Could Angular be automatically applying margins or padding to my component?

Storing JSON location data in JavaScript

Displaying radio values in an Angular ng-repeat directive

In the world of Express, the res.write function showcases the magic of HTML elements contained within

Achieving a Transparent Flash overlay on a website without hindering its usability (attention, interaction, form submissions, etc.)