Ionic 2 - prikaz JSON podataka sa API-ja

Ionic 2 – prikaz JSON-a sa API-ja

Iako su neke aplikacije same sebi dostatne ipak je više onih koje ovise o podacima s vanjskih izvora, a to su javni ili privatni API-ji. U ovom blog postu prikazat ćemo primjer dohvaćanja JSON (JavaScript Object Notation) podataka s javnog API-ja RandomUser.Me.

Zašto baš RandomUser? Zato što na jednostavniji način, bez da kreirate i pokrećete svoj API možete napraviti i testirati svoju Ionic 2 aplikaciju što je posebno korisno u procesu učenja.

Kreiranje Ionic 2 projekta

Za početak ćemo kreirati novi Ionic 2 projekt koristeći blank predložak.

Aplikacija u web pregledniku sada izgleda ovako. Znači, ništa posebno.

Ionic2 Blank RandomUser

Ako želite saznati nešto više o strukturi Ionic 2 aplikacije proučite moj prethodni blog post.

Ionic 2 provides (servisi)

Prije nego krenemo s izradom sučelja aplikacije i logike za prikaz podataka idemo napraviti servis koji će nam dohvaćati potrebne podatke. Koristiti ćemo sljedeći URL https://randomuser.me/api/?results=10. Ako kliknete na link vidjet ćete JSON sa 10 korisnika.

Servis nam služi za dohvaćanje podataka s JSON API-ja koristeći HTTP protokol. I ovdje ćemo koristiti Ionic 2 CLI pa ćemo servis kreirati pomoću naredbe $ ionic g provider RandomUserProvider.

Servisi se automatski kreiraju u mapi providers.

Ionic2Provider

U random-user-provider.ts dodat ćemo sljedeće:

Pozivanje servisa

Servis sada moramo pozvati u komponentu koja će činiti logiku naše aplikacije. Prvo je potrebno pozvati servis import { RandomUserProvider } from '../../providers/random-user-provider'; kako bi ga mogli koristiti.

Iako smo sada pozvali servis to i dalje ne znači da ga možemo koristiti. Kako bi to omogućili moramo ga navesti kao dio naše komponente @Component, a to činimo sa providers: [RandomUserProvider] .

Sljedeći korak je kreirati konstruktor _randomUser za RandomUserProvider.

Sada možemo kreirati funkciju getUsers() koja će nam prikazati korisnike.

U konačnici to izgleda ovako:

Označene linije dodali smo u našu HomePage komponentu.

P.S. Ako se odkomentira linija 16 podaci će se automatski prikazati bez potrebe za klikom na gumb GET Users.

Sučelje za prikaz

Logiku aplikacije smo napravili i sada se možemo pozabaviti sučeljem za prikaz koji će biti običan popis.

*ngFor direktiva će proći kroz popis korisnika i za svakog kreirati po jedan red u popisu.

Konačan izgled aplikacije

$ ionic serve daje nam konačan izgled naše aplikacije s uspješno dohvaćenim JSON-om.

Get Random User

Zaključak

U ovom blog postu imali ste priliku vidjeti kako u Ionic 2 aplikaciju dohvatiti JSON podatke s javnog API-ja te ih prikazati u obliku popisa.

Jednako tako, da smo htjeli, mogli smo koristiti i naš NodeJS API kako bi prikazali korisnike iz naše baze podataka. Rezultat bi bio isti.

Objavio

Tomislav Stanković

Web developer. Uz to bavi se i temama vezanim uz online reputaciju. Google+

Odgovori

Vaša adresa e-pošte neće biti objavljena. Nužna polja su označena s *