Search code examples
nativescriptnativescript-angular

NativeScript and Observables

I'am currently a rookie to Nativescript and Angular. I've created a API using laravel and it works fine. Now I'am trying to connect and fetch data from my API in NativeScript/Angular. I've followed this tutorial as guideline Alex Ziskind.

My API is build with PHP in Laravel and my calls works fine in Postman. I'am also capable of getting som data, but I cant return it in the HTML.

My service

export public ItemService {
    getItems():Observable<Item[]> {

        const authToken = "eyJ0eXAiOiJKV1QiLCJhbGciOiJSUzI1NiJ9.eyJhdWQiOiIyIiwianRpIjoiZmIzYjJmYzg3MWY2YTc5ZjVjMTM3NDNmMDllNGUwNzYwZDkyODljMmVjNTE3NGZiNDMzZTRjMGQ0MjBjYTJmYjlhMGQ1ZmFjNTQ1NmQ3ODkiLCJpYXQiOjE1OTA2NTAyMjksIm5iZiI6MTU5MDY1MDIyOSwiZXhwIjoxNjIyMTg2MjI5LCJzdWIiOiIxIiwic2NvcGVzIjpbXX0.Y3kidP6TP__DrwBDcGuk6M4p76INEdxG8UWrdakfkfcjCOlmHA0pb7a8vTvRQl2WLA_gwNWD4qA64ToOZb1YxkWCe8ESBTRDBg9Xq3DbSsZzlBZb9v8zS8PEeJVnfMtmxVIJb8IEU82DYGbpky-XdDfn67ge6fM3jTvwyivthlhaQLkjsh8e3VKlUx0P8lSxoHVw-N0369otRU6X0CTghl5lg9Khru4AtdJIBL3AOQAFEZmpzAGg9xZkvY923VkgkBHXt-adfvBwG2ZP0UhUVht-aiKK2z9HlR0eQ_-eqYlo-fqmTAE0U1k5ET99jbap8xO0dXJfdYVF0cAJ7p6FNjMoougwR89kz2xCcUHyFnPli3HcZx7j8IKDhqvneL8oWjaJuO41z1O69qsbk7_g8iLVI5vQlv6slrIe2YSbABkHzzCGndFX-smZkugB8aNmoRGpX8RJ5y5HxE6pJG8nn8CYih5ednDlWaTUBGk0p4zpck2z8788zyX41sPdB1oqR2gO0_CL-pBjCdTgDYXi_hy49_SO_4Vsf8lPL7vyhhvv7w_KgV7Jc7ju3Xm4HRLUG56K8CMy1KEfVuTDYs0gnybuFolfv2haeVgc_2h2A65O5nuUZg_RpePrSBZEftLsITWa3lUvnF380_htio-Zp3gXs3INoH7ms5KdTPt3mZ8";
        const URL = "http://10.0.2.2:8000/api/source";

        /*return this.http.get<Item[]>(
            URL,
            { headers: new HttpHeaders().append("Authorization", `Bearer ${authToken}`) }
        )*/

        const res = this.http.get<Item[]>(
            URL,
            { headers: new HttpHeaders().append("Authorization", `Bearer ${authToken}`) }
            )

            console.log()

        return res;

    }

    getItem(id) { }
    /*
        getItem(id: number): Item {
            return this.items.filter((item) => item.id === id)[0];
        }
    */
}

My component

export class ItemsComponent implements OnInit {
    public items$: Observable<Item[]>;

    constructor(private itemService: ItemService) { }

    ngOnInit(): void {
     this.itemService.getItems();
     console.log(this.itemService.getItems())
    }
}

My Template

<StackLayout class="page">
<ListView height="300" [items]="items$ | async" class="list-group">
    <ng-template let-item="item">
        <label [text]="item.data.first_name" class="list-group-item"></label>
    </ng-template>
</ListView>
</StackLayout>

Terminal Terminal log

Solution

  • Since this.itemService.getItems() returns an observable you will either have to subscribe to it in your typescript file or use the async pipe on your template.

    Using subscribe:

    items;

constructor() {
  this.itemService.getItems().subscribe(res => {
    this.items = res;
  })
}

// in your template (Label here is just an example)

<Label [text]="items"></Label>

    Using async:

    items$ = this.itemService.getItems();

// in your template (Label here is just an example of how you would use the async pipe)

<Label [text]="items$ | async"></Label>