Ionic2 create PHP to get data for show in page

Question

I want to know how to create PHP to get data for show home.html

and I get `Error data is not defined

I don't know this correct? please check this. I have not idea to create PHP, I want to set $path to keep my URL.

<ion-content>
    <ion-list inset>
        <ion-item>
            <ion-label>Username</ion-label>
            <ion-input [(ngModel)]="data.username" type="text"></ion-input>
        </ion-item>
    </ion-list>
    <div padding>
        <button ion-button block (click)="getRepos()">Search</button>
    </div>
    <ion-card *ngFor="let repo of foundRepos" >
        <ion-card-header>
            {{ repo.data.name }}
        </ion-card-header>
        <ion-card-content>
            {{ repo.data.description }}
        </ion-card-content>
    </ion-card>
</ion-content>

.

import { Component } from "@angular/core";
import { NavController } from 'ionic-angular';
import { Http } from '@angular/http';

@Component({
    selector: 'page-home',
    templateUrl: 'home.html'
})
export class HomePage {
  public foundRepos;

  constructor(public http: Http) {
        this.data = {};   >>>>>>>data is not defined
        data.username = ''; >>>>>data is not defined
        this.http = http;
    }

   getRepos() {
        var link = 'http://localhost/github.php';
        var data = JSON.stringify({username: this.data.username}); <<<<this.data.username (data is not defined)

        this.http.get(link, data) <<<<data is not defined
        .subscribe(data => {
         this.foundRepos = data.json();
       },
        err => console.error(err),
        () => console.log('getRepos completed')
    );
  }

}

github.php

<?php


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

        if ($username != "") {
            $path = "https://api.github.com/users/".$username."/repos";
            echo $path ;
        }
        else {
            echo "Empty username parameter!";
        }
    }
    else {
        echo "Not called properly with username parameter!";
    }
?>

Answer 1

Ah I see.

In your php you're retrieving a value called $postdata . So I assume you want to send the username from your ionic 2 application to your php file.

2 options, you should try them both because I do not understand php so I'm not sure what the right solution is.

But I do know what the problem is. You're making an http.get() call, and you're passing 2 arguments in this. link and data . The GET method is for getting data from your link, not giving it. The http.get takes 2 parameters, the url , in your case named link , and an HttpHeaders object, so not data.

Solution with parameter in http.get

So, as mentioned above, http.get() can't send your data . Unless you add it as a parameter in your URL. Then your typescript would look like this (note: backticks instead of ' ', makes string concatination easier):

var link = `http://localhost/github.php?username=${this.data.username}`;
this.http.get(link).subscribe(data) { .... }

And in php replace

$username = $response->username

with

$username = $_GET['username']

So final typscript looks like this (since php get request returned 403, Github probably disallowed it)

getRepos() { 
  var link = `localhost/…${this.data.username}`; 

  this.http.get(link) 
    .subscribe(data => { 
      let repoUrl = data.text(); 

      this.http.get(repoUrl).subscribe(githubResponse => { 
        this.foundRepos = githubResponse.json(); 
      }); 
  }, 
  err => console.error(err), 
  () => console.log('getRepos completed') 
  ); 
}

If anyone is seeking detailed explanation to why we came to this answer, pleek look in the chat below

Answer 2

You have not declared data variable in the class.

export class HomePage {
  public foundRepos;
  public data;//here
  constructor(public http: Http){
    this.data = {};
    this.data.username = '';//to refer to data in any function always use 'this'
  }
//other functions