Fetch data dynamically (2023)

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.

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 appdisplays 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.

{$ begin main.dart $}import 'dart:html';import 'dart:convert';// Input fieldsfinal InputElement favoriteNumber = querySelector('#favoriteNumber') as InputElement;final InputElement valueOfPi = querySelector('#valueOfPi') as InputElement;final InputElement horoscope = querySelector('#horoscope') as InputElement;final InputElement favOne = querySelector('#favOne') as InputElement;final InputElement favTwo = querySelector('#favTwo') as InputElement;final InputElement favThree = querySelector('#favThree') as InputElement;final RadioButtonInputElement loveChocolate = querySelector('#loveChocolate') as RadioButtonInputElement;final RadioButtonInputElement noLoveForChocolate = querySelector('#noLoveForChocolate') as RadioButtonInputElement;// Result fields to display values as JSONfinal TextAreaElement intAsJson = querySelector('#intAsJson') as TextAreaElement;final TextAreaElement doubleAsJson = querySelector('#doubleAsJson') as TextAreaElement;final TextAreaElement stringAsJson = querySelector('#stringAsJson') as TextAreaElement;final TextAreaElement listAsJson = querySelector('#listAsJson') as TextAreaElement;final TextAreaElement boolAsJson = querySelector('#boolAsJson') as TextAreaElement;final TextAreaElement mapAsJson = querySelector('#mapAsJson') as TextAreaElement;void main() { // Set up the listeners. favoriteNumber.onKeyUp.listen(_showJson); valueOfPi.onKeyUp.listen(_showJson); loveChocolate.onClick.listen(_showJson); noLoveForChocolate.onClick.listen(_showJson); horoscope.onKeyUp.listen(_showJson); favOne.onKeyUp.listen(_showJson); favTwo.onKeyUp.listen(_showJson); favThree.onKeyUp.listen(_showJson); _populateFromJson(); _showJson();}// Pre-fill the form with some default values.void _populateFromJson() { const jsonDataAsString = '''{ "favoriteNumber": 73, "valueOfPi": 3.141592, "chocolate": true, "horoscope": "Cancer", "favoriteThings": ["monkeys", "parrots", "lattes"] }'''; Map<String, dynamic> jsonData = json.decode(jsonDataAsString) as Map<String, dynamic>; favoriteNumber.value = jsonData['favoriteNumber'].toString(); valueOfPi.value = jsonData['valueOfPi'].toString(); horoscope.value = jsonData['horoscope'].toString(); final favoriteThings = jsonData['favoriteThings'] as List<dynamic>; favOne.value = favoriteThings[0] as String; favTwo.value = favoriteThings[1] as String; favThree.value = favoriteThings[2] as String; final chocolateRadioButton = jsonData['chocolate'] == false ? noLoveForChocolate : loveChocolate; chocolateRadioButton.checked = true;}/// Display all values as JSON.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);}{$ end main.dart $}{$ begin index.html $}<h1>It's All About You</h1><table> <thead> <tr> <th> </th> <th>Enter value</th> <th>Data type</th> <th>JSON string</th> </tr> </thead> <tbody> <tr> <td align="right">Favorite number:</td> <td><input type="text" id="favoriteNumber"></td> <td>integer</td> <td><textarea class="result" id="intAsJson" readonly></textarea></td> </tr> <tr> <td align="right">Do you know pi?</td> <td><input type="text" id="valueOfPi"></td> <td>double</td> <td><textarea class="result" id="doubleAsJson" readonly></textarea></td> </tr> <tr> <td align="right">What's your sign?</td> <td><input type="text" id="horoscope"></td> <td>String</td> <td><textarea class="result" id="stringAsJson" readonly></textarea></td> </tr> <tr> <td align="right">A few of your favorite things?</td> <td> <input type="text" id="favOne"> <input type="text" id="favTwo"> <input type="text" id="favThree"> </td> <td>List&lt;String&gt;</td> <td><textarea class="result" id="listAsJson" readonly></textarea></td> </tr> <tr> <td align="right">I love chocolate!</td> <td> <form> <input type="radio" name="chocolate" id="loveChocolate" checked>True <input type="radio" name="chocolate" id="noLoveForChocolate" checked>False </form> </td> <td>bool</td> <td><textarea class="result" id="boolAsJson" readonly> </textarea></td> </tr> </tbody></table><div> <label>All data together as a map</label><br> <textarea id="mapAsJson" readonly></textarea></div>{$ end index.html $}{$ begin styles.css $}body { background-color: #F8F8F8; font-family: 'Roboto', 'Open Sans', sans-serif; font-size: 14px; font-weight: normal; line-height: 1.2em; margin: 15px;}h1, p, td, th, label, table { color: #333;}table { text-align: left; border-spacing: 5px 15px}label { font-weight: bold;}textarea { resize: none;}.result { background-color: Ivory; padding: 5px 5px 5px 5px; border: 1px solid black;}#mapAsJson { background-color: Ivory; padding: 5px 5px 5px 5px; margin-top: 15px; border: 1px solid black; width: 500px; height: 50px; font-size:14px;}table { text-align: left; border-spacing: 5px 15px}label { font-weight: bold;}textarea { resize: none;}{$ end styles.css $}

The dart:convert library contains two convenient functionsfor working with JSON strings:

To use these functions,you need to import dart:convert into your Dart code:

import 'dart:convert';

The json.encode() and json.decode() functions can handle these Dart typesautomatically:

• num
• String
• bool
• Null
• List
• Map

Serializing data into JSON

Use the json.encode() function to serialize an object that supports JSON.The _showJson() function, from the example,converts all of the data to JSON strings.

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 quotes.
• A list is delineated with square brackets;its items are comma-separated.The list in this example contains strings.
• A map is delineated with curly brackets;it contains comma-separated key/value pairs,where the key appears first, followed by a colon,followed by the value.In this example,the keys in the map are strings.The values in the map vary in type but they are all JSON-parsable.

Parsing JSON data

Use the json.decode() function from the dart:convert library tocreate Dart objects from a JSON string.The example initially populates the values in the formfrom this JSON string:

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

This code calls json.decode() with a properly formatted JSONstring.

In this example, the full JSON string is hard coded into the Dart code,but it could be created by the form itselfor read from a static file or fetched from a server.An example later in this page shows how to dynamically fetchJSON data from a file that is co-located with the code for the app.

The json.decode() function reads the string andbuilds Dart objects from it.In this example,the json.decode() function creates a Map<String, dynamic> object based onthe information in the JSON string.The Map contains objects of various typesincluding an integer, a double, a boolean value, a regular string,and a list.All of the keys in the map are strings.

About URIs and HTTP requests

To make an HTTP GET request from within a web app,you need to provide a URI (Uniform Resource Identifier) for the resource.A URI is a character stringthat uniquely names a resource.A URL (Uniform Resource Locator) is a specific kind of URIthat also provides the location of a resource.URLs for resources on the World Wide Webcontain three pieces of information:

• The protocol used for communication
• The hostname of the server
• The path to the resource

For example, the URL for this page breaks down as follows:

This URL specifies the HTTP protocol.When you enter an HTTP address into a web browser,the browser sends an HTTP GET request to a web server,and the web server sends an HTTP response that contains thecontents of the page (or an error message).

Most HTTP requests in a web browser are simple GET requestsasking for the contents of a page.However, the HTTP protocol allows for other types of requests,such as POST for sending data from the client.

A Dart web app running inside of a browser can make HTTP requests.These HTTP requests are handled by the browser in which the app is running.Even though the browser itself can make HTTP requests anywhere on the web,a Dart web app running inside the browser can make only limitedHTTP requests because of security restrictions.Practically speaking,because of these limitations,HTTP requests from web apps are primarily useful forretrieving information in files specific toand co-located with the app.

The SDK provides these useful classes forformulating URIs and making HTTP requests:

Using getString() to load a file

One useful HTTP request your web app can make is a GET requestfor a data file served from the same origin as the app.The example below reads a data file called portmanteaux.jsonthat contains a JSON-formatted list of words.When you click the button,the app makes a GET request of the serverand loads the file.

Try it! Click Run and then click the Get portmanteaux button.

{$ begin main.dart $}import 'dart:convert';import 'dart:html';final UListElement wordList = querySelector('#wordList') as UListElement;void main() { querySelector('#getWords')!.onClick.listen(makeRequest);}Future<void> makeRequest(Event _) async { const path = 'https://dart.dev/f/portmanteaux.json'; 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. print("Couldn't open $path"); wordList.children.add(LIElement()..text = 'Request failed.'); }}void processResponse(String jsonString) { for (final portmanteau in json.decode(jsonString) as List<dynamic>) { wordList.children.add(LIElement()..text = portmanteau as String); }}{$ end main.dart $}{$ begin index.html $}<body> <h1>Portmanteaux</h1> <button id="getWords">Get portmanteaux</button> <ul id="wordList"></ul></body>{$ end index.html $}{$ begin styles.css $}body { background-color: #F8F8F8; font-family: 'Roboto', 'Open Sans', sans-serif; font-size: 14px; font-weight: normal; line-height: 1.2em; margin: 15px;}h1, p, li { color: #333;}{$ end styles.css $}

This program uses a convenience method, getString(), provided by theHttpRequest class to request the file from the server.

Future<void> makeRequest(Event _) async { const path = 'https://dart.dev/f/portmanteaux.json'; 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) as List<dynamic>) { wordList.children.add(LIElement()..text = portmanteau as String); }}

The getString() method uses a Future object to handle the request.A Future is a way to perform potentially time-consuming operations,such as HTTP requests, asynchronously.If you haven’t encountered futures yet,you can learn about them—as well as the async and await keywords—in theasynchronous programming codelab.Until then, you can use the code above as a guideand provide your own code for the body of the processResponse() functionand your own code to handle the error.

Using an HttpRequest object to load a file

The getString() method is good for an HTTP GET request that returnsa string loaded from a resource.For other cases,you need to create an HttpRequest object,configure its header and other information,and use the send() method to make the request.

This section rewrites the portmanteaux code to explicitly constructan HttpRequest object.

{$ begin main.dart $}import 'dart:html';import 'dart:convert';final UListElement wordList = querySelector('#wordList') as UListElement;void main() { querySelector('#getWords')!.onClick.listen(makeRequest);}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('');}void requestComplete(HttpRequest request) { if (request.status == 200) { final response = request.responseText; if (response != null) { processResponse(response); return; } } // The GET request failed. Handle the error. final li = LIElement()..text = 'Request failed, status=${request.status}'; wordList.children.add(li);}void processResponse(String jsonString) { for (final portmanteau in json.decode(jsonString) as List<dynamic>) { wordList.children.add(LIElement()..text = portmanteau as String); }}{$ end main.dart $}{$ begin index.html $}<body> <h1>Portmanteaux</h1> <button id="getWords">Get portmanteaux</button> <ul id="wordList"></ul></body>{$ end index.html $}{$ begin styles.css $}body { background-color: #F8F8F8; font-family: 'Roboto', 'Open Sans', sans-serif; font-size: 14px; font-weight: normal; line-height: 1.2em; margin: 15px;}h1, p, li { color: #333;}{$ end styles.css $}

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) { if (request.status == 200) { final response = request.responseText; if (response != null) { processResponse(response); return; } } // 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) as List<dynamic>) { wordList.children.add(LIElement()..text = portmanteau as String); }}

Other resources

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