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 ?

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.