In Angular4, Array from .subscribe is empty in component.ts [duplicate]

Question

I am fetching data from PHP API, But the variable after subscribe is empty in component.ts but, while using in component.html it displays data. I want to modify after fetching from API.

In service.ts:

get_tournaments(){
    return this.http.get("http://localhost/Website/api/tournament/read.php")
    .map(res=>res.json());
  }

In component.ts:

tournaments:Object[] = [];

ngOnInit() {  
    this.ongoing_ser.get_tournaments() 
    .subscribe(value=>this.tournaments=value);
    console.log("Main:",this.tournaments); <-- this is empty
}

In component.html:

it displays everything correct as required.

I want to modify the data fetched from API and then display in html

Jitendra · Accepted Answer · 2019-08-10 05:46:39Z

1

@Sudhindra Purohit Javascript is synchronous so it will to wait to complete subscribe your request. So that It will return empty in console.

If you want to modify your data then you can do like below

 this.ongoing_ser.get_tournaments() 
    .subscribe(value=> { this.tournaments=value;
     // DO here what ever you want with tournaments
     this.tournaments = this.tournaments.map(tour => {
       console.log(tour);
      }
 });

answered Aug 10, 2019 at 5:46

Jitendra

4161 gold badge3 silver badges8 bronze badges

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

Comments

nXn · Accepted Answer · 2019-08-10 11:24:25Z

0

You need to assign the value to the component variable and then alter it or display it using interpolation {{}}

In the componenet.ts

ngOnInit() {

    this.ongoing_ser.get_tournaments() 
        .subscribe(
            (data:any)=>{
                this.data=data;
                //you can do the data modification here 
            })

  }

In component.html

<div>{{data}}</div>

This will display the data in HTML

answered Aug 10, 2019 at 11:24

nXn

9446 silver badges13 bronze badges

Collectives™ on Stack Overflow

In Angular4, Array from .subscribe is empty in component.ts [duplicate]

2 Answers 2

Comments

Comments

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Linked

Related