0

I would like to make a http.post request, to receive a list of objects from PHP with .subscribe.

When I do that, I receive something like a string which contains my objects. But in a *ngFor loop, the console says me the list is an undefined variable. Here is my code :

list-master.ts

  /////
  objet01 = {ville: 'Bordeaux', prix: '69€'};
  objet02 = {ville: 'Lille', prix: '45€'};
  objs = [this.objet01, this.objet02];
  /////

  tempproj;


  constructor(public navCtrl: NavController, private navParams: NavParams, public http: Http) {

    this.http = http;

    this.getprojets();

  }

  getprojets() {
    var link = 'http://*****/getprojets.php';
    var myData = JSON.stringify({value: 'true'});

    this.http.post(link, myData)
    .subscribe(data => {
    this.tempproj = data["_body"]; 
    console.log('OKOK ' + this.tempproj + ' OKOK');
    }, error => {
    console.log("Oooops!");
    });

  }

Here is getprojets.php:

$postdata = file_get_contents("php://input");
    if (isset($postdata)) {
        $request = json_decode($postdata);
        $value = $request->value;

        if ($value === 'true' ) {
            $bdd = new PDO('***', '***', '***', array(PDO::ATTR_ERRMODE => PDO::ERRMODE_EXCEPTION));
            $bdd->setAttribute(PDO::ATTR_ERRMODE, PDO::ERRMODE_WARNING);

            $query = $bdd->prepare("SELECT * FROM projetsapparts") or die('Login invalide');
            $query->execute();
            $liste = array();
            class projet1 {};


 while ($projet = $query->fetch()) {
            $projet1 = new projet1;
            $projet1->ville = $projet['ville'];
            $projet1->photo = $projet['photo'];
            $liste[] = $projet1;
        }
        echo json_encode($liste);
    }
}
else {
    echo 'Erreur postdata';
}

And then, the list-master.html:

  <ion-slides class="marketslide" autoplay="3000" loop="true">
    <ion-slide *ngFor="let appart of tempproj">
      <ion-card (tap)="showplvdetails()">
        <img src="{{appart.photo}}">
        <div class="card-title">{{appart.ville}}</div>
      </ion-card>
    </ion-slide>
  </ion-slides> 

In the console, the var tempproj contains 3 entries, it looks like a list of objects : [{"ville":"Reims","photo":"http:******.jpg"},{"ville":"Paris","photo":"http:******.jpg"},{"ville":"Amsterdam","photo":"http:******.jpg"}]

But, I have this error:

Cannot read property 'hasAttribute' of undefined

When in the .html file, I replace the var tempproj by the var objs (which is set in .ts file instead of coming from PHP) in the *ngFor, all is working fine.

Why does the list of objects from PHP be undefined? On the *ngFor="let appart of tempproj" line, does the 'appart' can be an object? Please help me, I only find solutions for JavaScript and Angular 2. I'm on it for 5 days.

2
  • define your 'temproj'. as array const tempproj: Array<any> = []; Commented Nov 9, 2017 at 1:33
  • Thanks for your answer. By writing this before the constructor : tempproj: Array<any> = []; I have a new error, this one : ListMasterPage.html:23 ERROR Error: Error trying to diff '[{"ville":"Reims","photo":"http:*****.jpg"},{"ville":"Paris","photo":"http:*****.jpg"},{"ville":"Amsterdam","photo":"http:*****.jpg"}]'. Only arrays and iterables are allowed It seems to be better, but always don't working. I don't understand the error log. Commented Nov 9, 2017 at 18:26

1 Answer 1

1

The problem here is your tempproj object is undefined at the time your template renders.

Perhaps you could try initializing it to an empty array,

let tempproj: Array<any> = [];

constructor(public navCtrl: NavController, private navParams: NavParams, public http: Http) {

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

5 Comments

When I write "let" before the variable name, it is highlighted. It's not when I write it IN the constructor, but after compiling, it doesn't work better.
Ok. Can you create a git repository and share with us?
I don't know how git works, is it a cloud for files ? Sync with a folder on my computer ? I tried to sign up, then add a new repository, etc.. When i'm here => hpics.li/72a52fd what I have to do ? How do I add files to it ? GitHub Desktop says I cannot publish an unborn branch... => hpics.li/194b44e what does it mean ? Thanks for your help ;)
After some searches, I can give you this URL for my repository on git, I guess.... github.com/Noxstyleprodz/ionicproject02 Is that you asked me for ?
After some tries of writing types, I think I found the real problem : when I reload the page of the virtual device many times, I got the good work of my code, but only few times (near 1 or 2 of 10). It seems there's a problem with the loading time between HTML code and TS's, I suppose.. :/ What do you think about it ? If I'm right, how can I fix it ?

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.