CODEWITHSUNDEEP
restangulartypescript
Florian Guebel
Florian Guebel

Reputation: 37

Correctly receive data from web API but impossible to display them using Angular2/TypeScript

I'm trying to display the information I receive from a Web API but I think I'm missing something in my component.

The call in the service work (I receive a code 200 with all the Application) List of the application

But then, I just want to display them in the console and it doesn't fill the table.

ngOnInit(){
        this.getApplications();
        console.log(this.applications);
    }


getApplications() {
        this.applications = [];
        this._UCCXCiscoService.getApplications().subscribe(
            res => {
                this.applications = res;
            },
                    error => this.errorMessage = <any>error
        );
    }

    // Model

export interface Application {
    self: string;
    ScriptApplication: ScriptApplication;
    id: string;
    applicationName: string;
    type: string;
    description: string;
    maxsession: number;
    enabled: string;
}

export interface ScriptApplication {
    script: string;
    scriptParams: ScriptParam[];
}

export interface ScriptParam {
    name: string;
    value: string;
    type: string;
}

export interface RootObject {
    type: string;
    application: Application[];
}

My model is good, I'm pretty sure of that. I Think it's the method getApplications() that's wrong, but can't find why...

Thanks in advance for your help,

Florian

EDIT 1 : Code of getApplications() in my service

@Injectable()
export class UCCXCiscoService {

    public headers:Headers = new Headers({ 'Content-Type': 'application/json' ,'Authorization': 'Basic User + mdp'});

    constructor(private http: Http) {
    }

    getApplications() {
        let options = new RequestOptions({ headers: this.headers });
        return this.http.get('API URL', options)
            .map(data => <Application[]> data.json().application)
            .catch(this.handleError);
    }

Yes this method works and returns me the applications (as shown in the picture List of Applications). I didn't put the api url and the password here for privacy reason ^^'

EDIT 2 : getApplications() of component and the response of the service

EDIT 3 :

<div class="contentPage">
    <div class="pageTitleHeaderContainer">
        <div class="pageTitle">
            <span>Cisco</span>
        </div>
    </div>

    <div class="subContent">
        <message-to-user messageToUser={{messageToUser}} messageLevel={{messageLevel}}></message-to-user>

        <table class="table table-hover table-condensed">
            <th>Id</th>
            <th>Nom</th>

            <tr *ngFor="#application of applications">
                <td>{{application?.id}}</td>
                <td>{{application?.applicationName}}</td>
            </tr>
        </table>
    </div>
</div>

Upvotes: 0

Views: 74

Answers (2)

Florian Guebel
Florian Guebel

Reputation: 37

So thanks to the community, I found my problem. First the console.log() wasn't in the right place. Then I needed to change the ngFor to display the info and now it works fine !

You can read the comment of my post, to find the answer.

Upvotes: 0

Picci
Picci

Reputation: 17762

Yor are printing on the console in the ngOnInit() method, i.e. before the subscription code is executed and therefore before the applications property is filled. Move console.log() method inside the arrow function of subscribe() just after this.applications = res;

Upvotes: 1

Related Questions