how to convert results from database to array - Angular 2

[Dawg]

Hello

My object is to query the database (mysl/php) using  userName as the search criteria (currently hard coded for testing) and have that data available to work with for example {{this.foundUsername.userName}}. As of now I'm able to query the database and able to display it as {{this.foundUsername}} and the out put is:

[{"userID":"4","userName":"Robin","password":"robinpwd"}]

but I can't seem to do anything else with the data. Assuming its one big string. I used similar steps and received object that I can use with the *ngFor directive but in this instance its not array object that I can work with, any help you can provide would be greatly appreciated. 

import { Component }       from '@angular/core';

import { PersonType }      from '../services/persontype';

import { FindUserService } from './find-user.service';

@Component ({

    selector: 'user-search',

    template: `<h3>{{title}}</h3> 

        <input #inputUsername>

        <button (click)="findUser(inputUsername.value); inputUsername.value='' ">Find User</button>

        <br><h2>found(works): {{this.foundUsername}}</h2>   

        <br><h2>found(not working): {{this.foundUsername[0].username}}</h2>               

        <div class = "error" *ngIf="errorMessage"> {{errorMessage}}</div>`,

    providers: [ FindUserService ]

})

//<div *ngFor = "test1 of this.foundUsername">{{test1.userName}}</div>

export class UserSearchComponent{

    title = 'User search';

    

    private foundUsername: any;

    errorMessage: string;

    

    constructor(private _findUser: FindUserService ){ }

    findUser(){

        this._findUser.searchForUserMethod()

             .subscribe(

                  data => this.foundUsername = JSON.stringify(data) ,

                  error => this.errorMessage = <any>error);                 

    } 

}

import { Injectable } from '@angular/core';

import {Headers,  Http, Response, URLSearchParams, RequestOptions } from '@angular/http';

import { Observable }        from 'rxjs/Observable';

import { PersonType } from '../services/persontype'; 

@Injectable( )

export class FindUserService{   

    private _testUser: string = 'Robin';    

    private userUrl = 'http://localhost/angular2/loginv2/app/inc/findUser.php';

    constructor(private http: Http) { }    

    searchForUserMethod(): Observable<PersonType[]> {           

        return this.http

            .get(this.userUrl + '?userName='+ this._testUser )

            .map((response: Response) => <PersonType[]>response.json())

            .catch(this.handleError);                                           

    }    

    private handleError(error: any): Promise<any> {

        console.error('An error occurred', error); // for demo purposes only

        return Promise.reject(error.message || error);

    }

     private extractData(res: Response) {

        let body = res.json();

        // return body.data || [];

        return body;       

    }

}

[Sander Elias]

Hi Dawg,


this code:

JSON.stringify(data)

Turns your array, containing the object into a string. So, don't do that.

Regards

Sander