Flutter und JSON mit jsonplaceholder und Http
Es gibt einige Websiten für Testdaten, die einem Programmierer das Leben einfacher machen, JSONPlaceholder ist eine davon. Sie stellt JSON Datensätze zur Verfügung, die man dann über das Netz in die App laden kann.
Zu unserem Beispielcode:
1 2 3 4 | import 'package:flutter/material.dart'; import 'dart:async'; import 'dart:convert'; import 'package:http/http.dart' as http; |
Im Code oben importieren wir diesmal ein wenig mehr:
- material.dart für unsere Widgets, wie immer
- dart:async , für sie asynchrone Verarbeitung von Code
- dart:convert , für das Datenformat JSON
- http.dart , für den Webzugriff
In Visual Studio Code hatte ich mit http.dart ein Problem. Normalerweise binde ich Librarys mit einer Versionsnummer ein. Bei dieser Library hat das nicht funktioniert. Erst als ich die Versionsnummer weggelassen habe und durch any ersetzte, erkannte Visual Studio die Library.
Ich weiß nicht, ob das ein genereller Bug ist, oder ob ein Problem bei meiner lokalen Installation besteht.
Der nächste Beispielcode liest die JSON Datei aus dem Netz:
1 2 3 4 5 6 7 | Future<List> getJson() async {
String apiUrl = "https://jsonplaceholder.typicode.com/posts";
http.Response response = await http.get(apiUrl);
return jsonDecode(response.body);
}
|
Die Funktion getJson(...) ist eine asynchrone Funktion, was wir durch die Verwendung des Schlüsselwortes async auch Anzeigen.
Anschliessend erstellen wir im Code oben die Url für das JSON File als String Variable apiUrl. Mit http.Response ist der Typ des Inhalts der Variable response. Dieser wird das Resultat der Funktion http.get(apiUrl) zugewiesen. Das Datenobjekt vom Typ http.Response hat einen .body welcher das JSON Objekt enthält. Mit jsonDecode(...) holen wir das JSON Objekt aus dem response.body und retournieren es an die aufrufende Ebene. Natürlich gäbe es sowohl zu jsonDecode, als auch zu http.get noch mehr zu schreiben, das würde aber den Rahmen dieses Postes sprengen.
Hier der kurze Hauptcode:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 | void main()async{
List _data = await getJson();
String mystring =_data[99]["body"];
runApp(
new MaterialApp(
home: new Scaffold(
appBar: new AppBar(
title: new Text("JSON Parse Demo"),
centerTitle: true,
),
body: new Center(
child: new Text(mystring),
),
),
)
);
|
Die Funktion getJson(...) retourniert ein Future vom Typ List ..Future<List>. Da wir gleich nach main(...) diese Funktion aufrufen und das Ergebnis einer privaten Variable _data zuweisen, muss auch die main Funktion selbst, asynchron sein. Das erreichen wir mit dem Schlüsselwort async vor dem Funktionskörper der main Funktion. Das await vor getJson() sorgt dafür, das Dart abwartet bis wir das Ergebnis erhalten, bevor das Programm weiter abgearbeitet wird.
mystring wird dann ein Wert aus dem letzten Datensatz zugewiesen, welchen wir anschließend im Emulator auf den Bildschirm bringen.
Hinweis:
1.Eine einfache Methode zum testen wäre es, sich ein JSON File in Debugger Fenster ausdrucken zu lassen. Aktuell aber scheint es so, das die Print und die debugPrint Funktion in Dart, die Zeichenkette aber einer gewissen Grösse beschneiden, also nicht komplett auf den Bildschirm bringen.
2. Wenn man ein JSON File hat, das seine Datensätze durchnummeriert, z.B. 1 - 100 , sollte man trotzdem nicht vergessen, das Dart bei 0 anfängt. Das heisst bei 1-100, holen wir den letzten Datensatz über [99].
Das war es für jetzt. Bis bald !
Kommentare
Kommentar veröffentlichen