| OLD | NEW |
| 1 --- | 1 --- |
| 2 layout: tutorial | 2 layout: tutorial |
| 3 title: "Fetch Data Dynamically" | 3 title: "Fetch Data Dynamically" |
| 4 description: "Use HttpRequest to fetch data from a file or a server." | 4 description: "Use HttpRequest to fetch data from a file or a server." |
| 5 has-permalinks: true | 5 has-permalinks: true |
| 6 tutorial: | 6 tutorial: |
| 7 id: fetchdata | 7 id: fetchdata |
| 8 next: forms/ | 8 next: forms/ |
| 9 next-title: "Get Input from a Form" | 9 next-title: "Get Input from a Form" |
| 10 prev: streams/ | 10 prev: streams/ |
| (...skipping 66 matching lines...) Expand 10 before | Expand all | Expand 10 after Loading... |
| 77 can be serialized and represented by strings. | 77 can be serialized and represented by strings. |
| 78 | 78 |
| 79 **Try it!** | 79 **Try it!** |
| 80 The app running below, `its_all_about_you`, | 80 The app running below, `its_all_about_you`, |
| 81 displays the JSON string for data of various types. | 81 displays the JSON string for data of various types. |
| 82 Change the values of the input elements | 82 Change the values of the input elements |
| 83 and check out the JSON format for each data type. | 83 and check out the JSON format for each data type. |
| 84 | 84 |
| 85 <iframe class="running-app-frame" | 85 <iframe class="running-app-frame" |
| 86 style="height:500px;width:700px;" | 86 style="height:500px;width:700px;" |
| 87 src="examples/its_all_about_you/out/web/index.html"> | 87 src="examples/its_all_about_you/web/index.html"> |
| 88 </iframe> | 88 </iframe> |
| 89 | 89 |
| 90 <aside class="alert"> | 90 <aside class="alert"> |
| 91 <strong>Version Note:</strong> The its_all_about_you app | 91 <strong>Version Note:</strong> The its_all_about_you app |
| 92 is compatible with | 92 is compatible with |
| 93 <a href="https://pub.dartlang.org/packages/polymer#versions">polymer.dart 0.9</a
>. | 93 <a href="https://pub.dartlang.org/packages/polymer#versions">polymer.dart 0.10</
a>. |
| 94 </aside> | 94 </aside> |
| 95 | 95 |
| 96 The dart:convert library contains two convenient functions | 96 The dart:convert library contains two convenient functions |
| 97 for working with JSON strings: | 97 for working with JSON strings: |
| 98 | 98 |
| 99 | dart:convert function | Description | | 99 | dart:convert function | Description | |
| 100 |---|---| | 100 |---|---| |
| 101 | <a href="https://api.dartlang.org/dart_convert.html" target="_blank">JSON.deco
de()</a> | Builds Dart objects from a string containing JSON data. | | 101 | <a href="https://api.dartlang.org/dart_convert.html" target="_blank">JSON.deco
de()</a> | Builds Dart objects from a string containing JSON data. | |
| 102 | <a href="https://api.dartlang.org/dart_convert.html" target="_blank">JSON.enco
de()</a> | Serializes a Dart object into a JSON string. | | 102 | <a href="https://api.dartlang.org/dart_convert.html" target="_blank">JSON.enco
de()</a> | Serializes a Dart object into a JSON string. | |
| 103 {: .table} | 103 {: .table} |
| 104 | 104 |
| 105 To use these functions, | 105 To use these functions, |
| 106 you need to import dart:convert into your Dart code: | 106 you need to import dart:convert into your Dart code: |
| 107 | 107 |
| 108 {% highlight dart %} | 108 {% prettify dart %} |
| 109 import 'dart:convert'; | 109 import 'dart:convert'; |
| 110 {% endhighlight %} | 110 {% endprettify %} |
| 111 | 111 |
| 112 The JSON.encode() and JSON.decode() functions can handle these Dart types automa
tically: | 112 The JSON.encode() and JSON.decode() functions can handle these Dart types automa
tically: |
| 113 <ul> | 113 <ul> |
| 114 <li> num</li> | 114 <li> num</li> |
| 115 <li> String</li> | 115 <li> String</li> |
| 116 <li> bool</li> | 116 <li> bool</li> |
| 117 <li> null</li> | 117 <li> null</li> |
| 118 <li> List</li> | 118 <li> List</li> |
| 119 <li> Map</li> | 119 <li> Map</li> |
| 120 </ul> | 120 </ul> |
| (...skipping 31 matching lines...) Expand 10 before | Expand all | Expand 10 after Loading... |
| 152 the keys in the map are strings. | 152 the keys in the map are strings. |
| 153 The values in the map vary in type but they are all JSON-parsable. | 153 The values in the map vary in type but they are all JSON-parsable. |
| 154 | 154 |
| 155 ##Parsing JSON data | 155 ##Parsing JSON data |
| 156 | 156 |
| 157 Use the JSON.decode() function from the dart:convert library to | 157 Use the JSON.decode() function from the dart:convert library to |
| 158 create Dart objects from a JSON string. | 158 create Dart objects from a JSON string. |
| 159 The its_all_about_you example initially populates the values in the form | 159 The its_all_about_you example initially populates the values in the form |
| 160 from this JSON string: | 160 from this JSON string: |
| 161 | 161 |
| 162 {% highlight dart %} | 162 {% prettify dart %} |
| 163 String jsonDataAsString = ''' | 163 String jsonDataAsString = ''' |
| 164 { "favoriteNumber":44, | 164 { "favoriteNumber":44, |
| 165 "valueOfPi":3.141592, | 165 "valueOfPi":3.141592, |
| 166 "chocolate":true, | 166 "chocolate":true, |
| 167 "horrorScope":"virgo", | 167 "horrorScope":"virgo", |
| 168 "favoriteThings":["raindrops", | 168 "favoriteThings":["raindrops", |
| 169 "whiskers", | 169 "whiskers", |
| 170 "mittens"] | 170 "mittens"] |
| 171 } | 171 } |
| 172 '''; | 172 '''; |
| 173 | 173 |
| 174 Map jsonData = JSON.decode(jsonDataAsString); | 174 Map jsonData = JSON.decode(jsonDataAsString); |
| 175 {% endhighlight %} | 175 {% endprettify %} |
| 176 | 176 |
| 177 This code calls the JSON.decode() function with a properly formatted JSON string
. | 177 This code calls the JSON.decode() function with a properly formatted JSON string
. |
| 178 <strong>Note that Dart strings can use either single or double quotes to denote
strings. | 178 <strong>Note that Dart strings can use either single or double quotes to denote
strings. |
| 179 JSON requires double quotes.</strong> | 179 JSON requires double quotes.</strong> |
| 180 | 180 |
| 181 In this example, the full JSON string is hard coded into the Dart code, | 181 In this example, the full JSON string is hard coded into the Dart code, |
| 182 but it could be created by the form itself | 182 but it could be created by the form itself |
| 183 or read from a static file or received from a server. | 183 or read from a static file or received from a server. |
| 184 An example later on this page shows how to dynamically fetch | 184 An example later on this page shows how to dynamically fetch |
| 185 JSON data from a file that is co-located with the code for the app. | 185 JSON data from a file that is co-located with the code for the app. |
| (...skipping 121 matching lines...) Expand 10 before | Expand all | Expand 10 after Loading... |
| 307 and your own code to handle the error. | 307 and your own code to handle the error. |
| 308 | 308 |
| 309 ###Using a relative URI | 309 ###Using a relative URI |
| 310 | 310 |
| 311 The URI used for the GET request specifies just the name of | 311 The URI used for the GET request specifies just the name of |
| 312 the portmanteaux_simple.json data file. | 312 the portmanteaux_simple.json data file. |
| 313 Let's take a look at how that works. | 313 Let's take a look at how that works. |
| 314 | 314 |
| 315 | 315 |
| 316 Open the application directory in Dart Editor, | 316 Open the application directory in Dart Editor, |
| 317 select the portmanteaux_simple.html file, and run the program. | 317 select the web/portmanteaux_simple.html file, and run the program. |
| 318 Before doing anything else, | 318 Before doing anything else, |
| 319 notice the URI for the program in Dartium. | 319 notice the URI for the program in Dartium. |
| 320 | 320 |
| 321 <img class="scale-img-max" src="images/uri-dart-program.png" | 321 <img class="scale-img-max" src="images/uri-dart-program.png" |
| 322 alt="URI for a Dart program running in Dartium"> | 322 alt="URI for a Dart program running in Dartium"> |
| 323 | 323 |
| 324 <ul> | 324 <ul> |
| 325 <li markdown="1"> | 325 <li markdown="1"> |
| 326 The server designation 127.0.0.1 is the standard | 326 The server designation 127.0.0.1 is the standard |
| 327 for referring to _this computer_—the computer | 327 for referring to _this computer_—the computer |
| (...skipping 57 matching lines...) Expand 10 before | Expand all | Expand 10 after Loading... |
| 385 and then sends the request. | 385 and then sends the request. |
| 386 Let's take a look at the Dart code: | 386 Let's take a look at the Dart code: |
| 387 | 387 |
| 388 <img class="scale-img-max" src="images/portmanteaux-code.png" | 388 <img class="scale-img-max" src="images/portmanteaux-code.png" |
| 389 alt="Making an HTTP GET request"> | 389 alt="Making an HTTP GET request"> |
| 390 | 390 |
| 391 ###Sending the request | 391 ###Sending the request |
| 392 | 392 |
| 393 The send() method sends the request to the server. | 393 The send() method sends the request to the server. |
| 394 | 394 |
| 395 {% highlight dart %} | 395 {% prettify dart %} |
| 396 httpRequest.send(''); | 396 httpRequest.send(''); |
| 397 {% endhighlight %} | 397 {% endprettify %} |
| 398 | 398 |
| 399 Because the request in this example is a simple GET request, | 399 Because the request in this example is a simple GET request, |
| 400 the code can send an empty string. | 400 the code can send an empty string. |
| 401 For other types of requests, | 401 For other types of requests, |
| 402 such as POST requests, | 402 such as POST requests, |
| 403 this string can contain further details or relevant data. | 403 this string can contain further details or relevant data. |
| 404 You can also configure the HttpRequest object | 404 You can also configure the HttpRequest object |
| 405 by setting various header parameters using the setRequestHeader() method. | 405 by setting various header parameters using the setRequestHeader() method. |
| 406 | 406 |
| 407 ###Handling the response | 407 ###Handling the response |
| (...skipping 25 matching lines...) Expand all Loading... |
| 433 | 433 |
| 434 <img class="scale-img-max" src="images/portmanteaux-callback.png" | 434 <img class="scale-img-max" src="images/portmanteaux-callback.png" |
| 435 alt="Getting the response text from an HTTP GET request"> | 435 alt="Getting the response text from an HTTP GET request"> |
| 436 | 436 |
| 437 ###Populating the UI from JSON | 437 ###Populating the UI from JSON |
| 438 | 438 |
| 439 The data file in the portmanteaux example, | 439 The data file in the portmanteaux example, |
| 440 portmanteaux.json, | 440 portmanteaux.json, |
| 441 contains a JSON-formatted list of strings. | 441 contains a JSON-formatted list of strings. |
| 442 | 442 |
| 443 {% highlight dart %} | 443 {% prettify dart %} |
| 444 [ | 444 [ |
| 445 "portmanteau", "fantabulous", "spork", "smog", | 445 "portmanteau", "fantabulous", "spork", "smog", |
| 446 "spanglish", "gerrymander", "turducken", "stagflation", | 446 "spanglish", "gerrymander", "turducken", "stagflation", |
| 447 "Brangelina", "freeware", "oxbridge", "palimony", | 447 "Brangelina", "freeware", "oxbridge", "palimony", |
| 448 "brunch", "blog", "chortle", "Hassenpfeffer", "Schnitzelbank" | 448 "brunch", "blog", "chortle", "Hassenpfeffer", "Schnitzelbank" |
| 449 ] | 449 ] |
| 450 {% endhighlight %} | 450 {% endprettify %} |
| 451 | 451 |
| 452 Upon request, the server reads this data from the file | 452 Upon request, the server reads this data from the file |
| 453 and sends it as a single string | 453 and sends it as a single string |
| 454 to the client program. | 454 to the client program. |
| 455 The client program receives the JSON string | 455 The client program receives the JSON string |
| 456 and uses JSON.decode() | 456 and uses JSON.decode() |
| 457 to create the String objects specified by the JSON string. | 457 to create the String objects specified by the JSON string. |
| 458 | 458 |
| 459 <img class="scale-img-max" src="images/json-parse.png" | 459 <img class="scale-img-max" src="images/json-parse.png" |
| 460 alt="Decode a JSON formatted list of strings"> | 460 alt="Decode a JSON formatted list of strings"> |
| (...skipping 16 matching lines...) Expand all Loading... |
| 477 * The next tutorial, | 477 * The next tutorial, |
| 478 [Get Input from a Form](/docs/tutorials/forms/), | 478 [Get Input from a Form](/docs/tutorials/forms/), |
| 479 contains a client/server example that | 479 contains a client/server example that |
| 480 shows you how to use a form to get data from the user, | 480 shows you how to use a form to get data from the user, |
| 481 and using JSON, send that form to a server, | 481 and using JSON, send that form to a server, |
| 482 and handle the server's response. | 482 and handle the server's response. |
| 483 | 483 |
| 484 {% endcapture %} | 484 {% endcapture %} |
| 485 | 485 |
| 486 {% include tutorial.html %} | 486 {% include tutorial.html %} |
| OLD | NEW |