1

I have a problem with angular2 and typescript. I try fetching data jsonp, but the returns function is a observable, and i need de object results. I need help.

enter image description here

Accounts.ts

import { Component} from '@angular/core';
import { NavController, NavParams } from 'ionic-angular';
import {AccountService} from '../../providers/account-service';
import { Observable } from 'rxjs/Rx';


@Component({
  selector: 'page-account',
  templateUrl: 'account.html',
  providers: [AccountService]
})
export class AccountPage {

    data: any;
    listAccounts: any;
    accounts: any;


    constructor(public navCtrl: NavController, public navParams: NavParams, private AccountService: AccountService) {
        this.accounts = this.getAccountsResult();     

    }

    getAccountsResult() {
        return this.AccountService.retrieveAccounts();
    }

    getAccountsResultDebug() {
        console.log(this.AccountService.retrieveAccounts());
    }  

}

accounts-service.ts

import { Injectable } from '@angular/core';
import { Headers, Http, RequestOptions, Jsonp } from '@angular/http';
import 'rxjs/Rx';


/*
  Generated class for the AccountService provider.

  See https://angular.io/docs/ts/latest/guide/dependency-injection.html
  for more info on providers and Angular 2 DI.
*/
@Injectable()
export class AccountService {

    /**
     *  Variaveis globais
    **/

    data: Array<AccountService>;
    token: string;
    url: string;
    param: string;
    result: any;


    constructor(private http: Http, private jsonp: Jsonp) {
        this.http = http;
        this.jsonp = jsonp;
        this.token = 'tokenofapp'
        this.url = 'urlofapp'

    }


    /**
     * PROGRAMADOR:     Débora Gonçalves
     * DATA:            23/01/2017
     * OBJETIVO:        Recuperando dados da API accounts
     **/

    retrieveAccounts() {

        // variavel para enviar os headers
        let headers = new Headers();

        //definindo valores no array headers
        headers.append('x-access-key', this.token);
        headers.append('Content-Type', 'application/jsonp');

        // definindo o requestoptions com os parametros do headers
        let options = new RequestOptions({

            headers: headers

        });

        //executando requisição da url 
        //return this.jsonp.get(this.url, options).map(res => res.json());
        //    .subscribe(
        //    data => this.result = [data]
        //);


        return this.jsonp.get(this.url, options).map(res => res.json());

    }

}

accountpage

<ion-header>
  <ion-navbar>
    <button ion-button menuToggle>
      <ion-icon name="menu"></ion-icon>
    </button>
    <ion-title>Contas</ion-title>
  </ion-navbar>
</ion-header>

<ion-content>
    <ion-list>
        <button ion-item outline *ngFor="let i of accounts.result" (click)="openPage($event, 1, DetailsAccountPage)">
            <p>a</p>{{i}}
            <p *ngFor="let f of i" strong>Nome do fulano {{f}}</p>
        </button>
        <button ion-item outline>

            <p strong>Nome do fulano</p>
            <div class="item-note" item-right>

            </div>
        </button>

        <button ion-item outline (click)="getAccountsResultDebug()">

            <p strong>Nome do fulano</p>
            <div class="item-note" item-right>

            </div>
        </button>
    </ion-list>
</ion-content>

1 Answer 1

1

You need to subscribe to Angular 2 service in your component.ts

follow https://scotch.io/tutorials/angular-2-http-requests-with-observables

this needs to be in your component.ts wherever u call ur service. .subscribe( data => this.result = [data] );

Sign up to request clarification or add additional context in comments.

1 Comment

can u plz provider what error is coming ? or any working plunkr or something.

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.