angular 4 get data from database does not work

Question

I am using angular 4 with mySql Db.

Here is my service.

service.ts

 getData(){
    return this.http.get('http://example/users.php').map(res=>{
      return res.json();
    }).catch(err=>{
      return err.json();
    })
  }

i have two pages One is Home,another one is About.

Here is my Home Component.

 ngOnInit() {
    this.API.getData().subscribe(res=>{
                console.log("dashoard",res);
    })
  }

Here is my result.

like this JSON.

[{
 "user":"name one",
 "status":"1"
},
{
 "user":"name two",
 "status":"1"
}]

I fetch records based on user status is 1.

i changed any values is database.

I changed name one user status is "0"; go to About page then click to home Page.

record length is 2.When i click ctrl+f5 record length is 1.

My problem is data retrieved.But does not get updated data.why?

I have no idea.

Kindly advice me,

Thanks.

try solution which i given , it should work ,let me know if it doesnt work for you... — Pranay Rana
– Pranay Rana, Commented Dec 1, 2017 at 8:21
can you make sure that your constructor getting called every time when you come back from about page to home page ....that is must because if you constructor is not getting called than it will not work and also check oninit method also get called — Pranay Rana
– Pranay Rana, Commented Dec 1, 2017 at 10:12

Pranay Rana · Accepted Answer · 2017-12-01 08:37:27Z

1

one more reason of error is , you request is inside ngOnInit method

 ngOnInit() {
    this.API.getData().subscribe(res=>{
                console.log("dashoard",res);
    })
  }

put code in Constructor

constructor() {
    this.API.getData().subscribe(res=>{
                console.log("dashoard",res);
    })
  }

service code

 getData(){
  let headers = new Headers({
            'Content-Type': 'application/json',
            'Cache-Control' : 'no-cache'
            'Access-Control-Allow-Credentials': 'true'
        });
  let options = new RequestOptions({ headers: headers });
    return this.http.get('http://example/users.php',options).map(res=>{
      return res.json();
    }).catch(err=>{
      return err.json();
    })
  }

check this also : https://fetch.spec.whatwg.org/#http-cors-protocol

Its might be because browser does caching of your data , you need to put cache to off by using Header options avaiable for Get method.

below is code for making cache off

let headers = new Headers({
   'Content-Type': 'application/json',
   'Cache-Control' : 'no-cache',
    'Access-Control-Allow-Credentials': 'true'
});
let options = new RequestOptions({ headers: headers });
return this._http.get("url", options).map(response => response.json());

edited Dec 1, 2017 at 8:37

answered Dec 1, 2017 at 8:17

Pranay Rana

177k37 gold badges244 silver badges266 bronze badges

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

10 Comments

GEVS Over a year ago

Thanks for ur reply.i try to this i got this err Request header field Cache-Control is not allowed by Access-Control-Allow-Headers in preflight response.

GEVS Over a year ago

Still i got this err.I put the code in constructor.

Pranay Rana Over a year ago

@GEVS - but i think you should go with Cache-control option , because that is only i think problem here

Pranay Rana Over a year ago

@GEVS - you used routing of angualr to move between page ... right ??

GEVS Over a year ago

Yes.I used routing between pages

|

Collectives™ on Stack Overflow

angular 4 get data from database does not work

1 Answer 1

10 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

10 Comments

Your Answer

Sign up or log in

Post as a guest

Related