Angular: data disappears on page reload

Question

I've an html template

Company-list.component.html

<br/>
<div class="animated fadeIn">
    <div class="row">
      <div class="col-lg-6">
            <div class="card">
            <div class="card-header">
                <i class="fa fa-align-justify">Employee List</i> 
            </div>
            <div class="card-body">
                    <table class="table" >
                    <thead font-size="2px" align="center">
                        <tr>
                            <th>Id</th>
                            <th>Company </th>           
                            <th>product</th>        
                            <th>Quantity</th> 
                            <th>Price</th>                 
                        </tr>
                    </thead>
                    <tbody>
                        <tr align="center" *ngFor="let data of datas" >                            
                            <td>{{data.cmpid}}</td>  
                            <td>{{data.cmpname}}</td> 
                            <td>{{data.cmpproduct}}</td>
                            <td>{{data.cmpqty}}</td>
                            <td>{{data.cmpprice}}</td>     
                        </tr>
                    </tbody>
                    </table>
                </div>
            </div>
        </div> 
    </div>
</div>

Method that gets invoked on button click

Company-list.component.ts

public getCompanylist(){

   console.log("getCompanyList() called");
  this.datas=this.newservice.getcompanylist();
    console.log(this.datas);  
    console.log("getcomapnylist() in companylistcomponent.ts Called da");
    return this.datas;
  };

The same method gets invoked on page load as well

Company-list.component.ts

ngOnInit() {

    console.log("NG oninit called.")
    this.getCompanylist();

  }

getCompanylist() inturn calls a method in the service

myservice.ts

getcompanylist() {

  alert("service method called");   

  this.http.get("http://localhost:8080/tabletolist").subscribe((data)=>{this.datas=data});
return this.datas;
}

When I click the button getCompanyList() method updates datas field with array returned from the springboot server as expected but on page load eventhough same method ie getCompanylist() is called it sets datas field to undefined instead of data returned from the server. Even weird, when the component is loaded using the router from another component, it works as expected but on loading the same page url even though method is invoked it sets datas field to undefined. Someone please help me figure out the issue.

Answer 1

You can use the datas variable in your service instead of returning it.

(It looks like the function can return before the subscribe call is complete in your original way).

Eg:

myservice.ts

getcompanylist() {

  this.http.get("http://localhost:8080/tabletolist").subscribe((data)=>{
{
this.datas=data
}
);
}

Company-list.component.ts:

ngOnInit(){
this.newservice.getcompanylist();
  };

Company-list.component.html

<tr align="center" *ngFor="let data of newservice.datas" > 
...
</tr>

Answer 2

Your coding practice is not recommended and must be improved.

Try this approach:

1-Service should be used for service/api calls and data-flow.

2-Service Call Subscription should be handled where service is required mainly components not the service component itself.

Your code should be:

myservice.ts

getCompanyList() {
  const url = "http://localhost:8080/tabletolist";
  return this.http.get(url);
}

Company-list.component.ts

Declare any empty array property namely datas

public datas = [];

Initialize your service in component's constructor (private myService: myservice)

getCompanyList(){
   this.myService.getCompanyList().subscribe(res => {
          this.datas = res
      });
}

Call getCompanyList Method when component is initialised

ngOnInit() {
    this.getCompanyList();
}

Answer 3

myservice.ts

getcompanylist() {

  alert("service method called");   

  this.http.get("http://localhost:8080/tabletolist").subscribe((data)=> data);
}

try like this

Company-list.component.ts

ngOnInit() {

    console.log("NG oninit called.")
   this.newservice.getcompanylist().then((data) => { this.datas = data});

  }