Fetch data dynamically

What's the point?

• Data on the web is often formatted in JSON.
• JSON is text based and human readable.
• The dart:convert library provides support for JSON.
• Use HttpRequest to dynamically load data.

Web apps often useJSON(JavaScript Object Notation)to pass data between clients and servers.Data can be serialized into a JSON string,which is then passed between a client and server,and revived as an object at its destination.This tutorial shows you how to use functions in thedart:convertlibrary to produce and consume JSON data.Because JSON data is typically loaded dynamically,this tutorial also shows how a web appcan use an HTTP request to get data from an HTTP server.For web apps,HTTP requests are served by the browser in which the app is running,and thus are subject to the browser’s security restrictions.

Note: This page uses embedded DartPads to display runnable examples. If you see empty boxes instead of DartPads, go to theDartPad troubleshooting page.

About JSON

The JSON data format is easy for humansto write and read because it is lightweight and text based.With JSON, various data typesand simple data structures such as lists and mapscan be serialized and represented by strings.

Try it!The following app, its_all_about_you,displays the JSON string for data of various types.Click Run to start the app.Then change the values of the input elements,and check out the JSON format for each data type.You might prefer toopen the app in DartPadto have more space for the app’s code and UI.

import 'dart:convert';

void showJson(Event ) {  // Grab the data that will be converted to JSON.  final favNum = int.tryParse(favoriteNumber.value);  final pi = double.tryParse(valueOfPi.value);  final chocolate = loveChocolate.checked;  final sign = horoscope.value;  final favoriteThings = <String>[    favOne.value,    favTwo.value,    favThree.value,  ];  final formData = {    'favoriteNumber': favNum,    'valueOfPi': pi,    'chocolate': chocolate,    'horoscope': sign,    'favoriteThings': favoriteThings  };  // Convert to JSON and display results.  intAsJson.text = json.encode(favNum);  doubleAsJson.text = json.encode(pi);  boolAsJson.text = json.encode(chocolate);  stringAsJson.text = json.encode(sign);  listAsJson.text = json.encode(favoriteThings);  mapAsJson.text = json.encode(formData);}

Shown below is the JSON string that results from the codeusing the original values from the app:- Numeric and boolean valuesappear as they would if they were literal values in code,without quotes or other delineating marks.- A boolean value is either true or false.- The null value is represented as null.- Strings are contained within _double

final jsonDataAsString = '''{  "favoriteNumber": 73,  "valueOfPi": 3.141592,  "chocolate": true,  "horoscope": "Cancer",  "favoriteThings": ["monkeys", "parrots", "lattes"]}''';Map jsonData = json.decode(jsonDataAsString) as Map;

Future<void> makeRequest(Event _) async {  const path = 'https://dart.dev/f/portmanteaux.json&#39;;  try {    // Make the GET request    final jsonString = await HttpRequest.getString(path);    // The request succeeded. Process the JSON.    processResponse(jsonString);  } catch (e) {    // The GET request failed. Handle the error.    // ···  }}void processResponse(String jsonString) {  for (final portmanteau in json.decode(jsonString)) {    wordList.children.add(LIElement()..text = portmanteau as String);  }}

Setting up the HttpRequest object

The mouse-click handler for the buttoncreates an HttpRequest object,configures it with a URI and callback function,and then sends the request.Let’s take a look at the Dart code:

Future<void> makeRequest(Event _) async {
  const path = 'https://dart.dev/f/portmanteaux.json';
  final httpRequest = HttpRequest();
  httpRequest
    ..open('GET', path)
    ..onLoadEnd.listen((e) => requestComplete(httpRequest))
    ..send('');
}

Sending the request

The send() method sends the request to the server.

httpRequest.send('');

Because the request in this example is a simple GET request,the code can send an empty string.For other types of requests,such as POST requests,this string can contain relevant data.You can also configure the HttpRequest objectby setting various header parameters using the setRequestHeader() method.

Handling the response

To handle the HTTP response,you need to set up a callback functionbefore calling send().Our example sets up a one-line callback functionfor onLoadEnd eventsthat in turn calls requestComplete().This callback function is called when the request completes,either successfully or unsuccessfully.

The requestComplete() functionchecks the status code for the request.

void requestComplete(HttpRequest request) {
  switch (request.status) {
    case 200:
      processResponse(request.responseText);
      return;
    default:
      // The GET request failed. Handle the error.
      // ···
  }
}

If the status code is 200,the file was found and loaded successfully.The content of the requested file (portmanteaux.json) isreturned in the responseText property of an HttpRequest object.

Populating the UI from JSON

The data file in the portmanteaux example,portmanteaux.json,contains the following JSON-formatted list of strings:

[
  "portmanteau", "fantabulous", "spork", "smog",
  "spanglish", "gerrymander", "turducken", "stagflation",
  "bromance", "freeware", "oxbridge", "palimony", "netiquette",
  "brunch", "blog", "chortle", "Hassenpfeffer", "Schnitzelbank"
]

Upon request, the server reads the fileand sends it as a single stringto the client program.

Using json.decode(),the app easily converts the JSON-formatted list of wordsto a Dart list of strings,creates a new LIElement for each one,and adds it to the <ul> element on the page.

void processResponse(String jsonString) {
  for (final portmanteau in json.decode(jsonString)) {
    wordList.children.add(LIElement()..text = portmanteau as String);
  }
}

Other resources

• Using JSON
• Asynchronous programming: futures, async, await