Help - jsonp - ionic2 with angular


#1

I have a api for fetching data in ion list , but not working, i need help.

accounts.ts

import { Component, OnInit } from '@angular/core';
import { NavController, NavParams } from 'ionic-angular';
import { AccountService } from '../../providers/account-service';
import { Headers, Jsonp, Http, RequestOptions} from '@angular/http';
import 'rxjs/add/operator/map';



@Component({
  selector: 'page-account',
  templateUrl: 'account.html'
  //  ,
  //template: '<ion-item text-wrap *ngFor="let c of data ">{{data.gender}}</ion-item>'
})
export class AccountPage implements OnInit{

    data: any;
    cell: any;
    arr: any;
    celular: any;
    constructor(public navCtrl: NavController, public navParams: NavParams, public AccountService: AccountService,
        private jsonp: Jsonp, private http: Http) {
        //let headers = new Headers();
        //headers.append('x-access-key', this.token);
        //let options = new RequestOptions({
        //    headers: headers
        //});

        //this.jsonp.get(this.url, options).map((res: Response) => this.data);
        //console.log(this.data);
       
        
    }

    ngOnInit() {
        //this.data = this.AccountService.getAccounts();

        let headers = new Headers();
        headers.append('x-access-key', '6b157c1ef92e7dee1ad4779a2dff8958');
        headers.append('Content-type', 'application/json')
        let options = new RequestOptions({
            headers: headers
        });

        return this.http.get('http://debora.testmylimsweb.com/api/v2/accounts?callback=JSONP_CALLBACK', options)
            .map(res => res.json())
            .subscribe(data => this.data = data.results,
            err => console.log("erro", err),
            () =>
                this.data

            );
    }

    ionViewDidLoad() {
        
        //this.data = this.AccountService.getAccounts();
    }
    // for button test
    test() {
        let headers = new Headers();
        headers.append('x-access-key', '6b157c1ef92e7dee1ad4779a2dff8958');
        headers.append('content-type', 'application/json')
        let options = new RequestOptions({
            headers: headers
        });

return this.http.get('http://debora.testmylimsweb.com/api/v2/accounts?callback=JSONP_CALLBACK', options)
    .map(res => res.json())
    .subscribe(data => this.data = data,
    err => console.log("erro", err),
    () =>
        console.log(this.data)

    );
}
}

**account-service.ts -- provider**

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


@Injectable()
export class AccountService {

/**
 *  Variaveis globais
**/

token: string = '43c3f75fc7619ca2432a039dcaeae836';
//url: string = 'http://v1_37_fixes.testmylimsweb.com/api/v2/accounts?callback=JSONP_CALLBACK';
url: string = 'https://randomuser.me/api?callback=JSONP_CALLBACK';
data: Object;
constructor(private jsonp: Jsonp, private http: Http) {

}

getAccounts() {
    let headers = new Headers();
    headers.append('x-access-key', this.token);
    headers.append('Content-type', 'application/json')
    let options = new RequestOptions({
        headers: headers
    });

    return this.jsonp.get(this.url)
        .map(res => res.json())
        .subscribe(data => this.data = data.results[0],
        err => console.log("erro", err),
        () =>
            // console.log(this.data)
            this.data
       
        );
}

getAccountsDebug() {
    console.log(this.getAccounts());
}


}

account.html

<script src="accounts.js"></script>
<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 padding><button (click)="test();">aaaaaaaaaaaaaaaaa</button>
    <ion-list id="list-accounts" *ngIf="data">
        
      
        <!--<ion-item text-wrap *ngFor="let c of data | async">-->
            <ion-item text-wrap *ngFor="let c of data">
                {{data | json }}
            </ion-item>
    </ion-list>
</ion-content>

return this, when click in button, return in response my json, but no fetching in view