Angular 2 - Unable to do HTTP POST request

1 view

Skip to first unread message

LearningAngular

unread,

Nov 16, 2016, 7:15:29 PM11/16/16

to Angular2

Hello everybody,

For the past two weeks I been trying to get this simple script to work without any success and exhausted trying to figure this out. The script isn't displaying any error messages which makes it that much harder to figure out what it is that I'm doing wrong. When I run the script All i get is the square brackets [] result of this line (<pre>{{ this.userListReceived | json }}).

I highlighted the problem areas in red as well as a screenshot of the chrome console/network

the script itself isn't doing a lot other then retrieve a record based on the search value userName: 'anna'

Side note:

Now if i change the search value in the PHP file to: $findUser = $_POST['userName'] = 'anna';

I get the following results

[{"userID": "3","userName": "anna", "password": "pass3" }]

any help you can provide would be greatly appreciated.

Component

@Component({
    selector: 'get-userlist',
    template: `<h2>Testing</h2>              
               <pre>{{ this.userListReceived | json }} </pre>`,
    providers: [ GetUserListService ]
})

export class GetUserListComponent implements OnInit {   
    private userListReceived: UserType[];
    private errMsg1: string;
    
    constructor(private getUserList: GetUserListService) {}

    getUserListButtonMethod(){      
        this.getUserList.getUserListMethod()
            .subscribe( 
                userData => this.userListReceived = userData,
                error => this.errMsg1 = <any>error,
                ()=>console.log('finished')
            );
    }

    ngOnInit(){
        this.getUserListButtonMethod();
    }
}

service

@Injectable()

export class GetUserListService{
    private userUrl = 'http://testing.dev/angular/app/services/getUserList.php'; 
    private getList: UserType[];   

    constructor( private _http: Http){}

    getUserListMethod(): Observable<UserType[]>{       
        let headers = new Headers({ 'Content-Type': 'application/json' });
        let options = new RequestOptions({ headers: headers });

        var findU = JSON.stringify({userName: 'anna'}); // problem area. assuming findU isn't passed through

        return this._http
                .post(this.userUrl, findU , options) //problem area
                .map((res: Response) => res.json()) 
                .catch (error => <any>error);                
    } //END - getUserListMethod
} //END of class

PHP script

<?php 
	require_once('dbtesting.php'); 
	$dbcon = Connection::getConnection(); 
	$findUser = $_POST['userName'] ; //problem area, assuming $findUser isn't receiving the value in this case userName for search	
	Try{
		$STMT = $dbcon ->prepare("SELECT * FROM tbl_angular
		                                   WHERE userName = '$findUser' ");	
		$STMT->execute();
		$getUserlist = $STMT->fetchAll(PDO::FETCH_ASSOC);	
	}
	catch(PDOException $e){ echo 'Unable to find user: ' . $e->getMessage(); }	
	echo json_encode($getUserlist);	
?>