| OLD | NEW |
| 1 --- | 1 --- |
| 2 layout: default | 2 layout: default |
| 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: polymer-intro/ | 10 prev: polymer-intro/ |
| 11 prev-title: "Define a Custom Element" | 11 prev-title: "Define a Custom Element" |
| 12 --- | 12 --- |
| 13 | 13 |
| 14 {% capture whats_the_point %} | 14 {% capture whats_the_point %} |
| 15 | 15 |
| 16 * Data on the web is often formatted in JSON. | 16 * Data on the web is often formatted in JSON. |
| 17 * JSON is text based and human readable. | 17 * JSON is text based and human readable. |
| 18 * The dart:json library provides support for JSON. | 18 * The dart:json library provides support for JSON. |
| 19 * Use HttpRequest to dynamically load data. | 19 * Use HttpRequest to dynamically load data. |
| 20 | 20 |
| 21 {% endcapture %} | 21 {% endcapture %} |
| 22 | 22 |
| 23 {% capture sample_links %} | 23 {% capture sample_links %} |
| 24 | 24 |
| 25 <p> | 25 <p> |
| 26 Get the source code for the samples featured in this target:</p> | 26 Get the source code for the samples featured in this tutorial:</p> |
| 27 | 27 |
| 28 <ul> | 28 <ul> |
| 29 <li> | 29 <li> |
| 30 <a href="https://github.com/dart-lang/dart-tutorials-samples/tree/master/web
/target09/its_all_about_you" | 30 <a href="https://github.com/dart-lang/dart-tutorials-samples/tree/master/web
/fetchdata/its_all_about_you" |
| 31 target="_blank">its_all_about_you</a> (web_ui) | 31 target="_blank">its_all_about_you</a> |
| 32 </li> | 32 </li> |
| 33 <li> | 33 <li> |
| 34 <a href="https://github.com/dart-lang/dart-tutorials-samples/tree/master/web
/target09-polymer/its_all_about_you" | 34 <a href="https://github.com/dart-lang/dart-tutorials-samples/tree/master/web
/fetchdata/portmanteaux_simple" |
| 35 target="_blank">its_all_about_you</a> (polymer) | |
| 36 </li> | |
| 37 <li> | |
| 38 <a href="https://github.com/dart-lang/dart-tutorials-samples/tree/master/web
/target09/portmanteaux_simple" | |
| 39 target="_blank">portmanteaux_simple</a> | 35 target="_blank">portmanteaux_simple</a> |
| 40 </li> | 36 </li> |
| 41 <li> | 37 <li> |
| 42 <a href="https://github.com/dart-lang/dart-tutorials-samples/tree/master/web
/target09/portmanteaux" | 38 <a href="https://github.com/dart-lang/dart-tutorials-samples/tree/master/web
/fetchdata/portmanteaux" |
| 43 target="_blank">portmanteaux</a> | 39 target="_blank">portmanteaux</a> |
| 44 </li> | 40 </li> |
| 45 </ul> | 41 </ul> |
| 46 | 42 |
| 47 {% endcapture %} | 43 {% endcapture %} |
| 48 | 44 |
| 49 {% capture content %} | 45 {% capture content %} |
| 50 | 46 |
| 51 <div class="tute-target-title"> | 47 <div class="tute-target-title"> |
| 52 <h1>{{page.title}}</h1> | 48 <h1>{{page.title}}</h1> |
| 53 <h3>Get data from a file or server.</h3> | 49 <h3>Get data from a file or server.</h3> |
| 54 </div> | 50 </div> |
| 55 | 51 |
| 56 Web applications often use | 52 Web applications often use |
| 57 <a href="http://www.json.org/" target="_blank">JSON</a> (JavaScript Object Notat
ion) | 53 <a href="http://www.json.org/" target="_blank">JSON</a> (JavaScript Object Notat
ion) |
| 58 to pass data between clients and servers. | 54 to pass data between clients and servers. |
| 59 Data can be _serialized_ into a JSON string, | 55 Data can be _serialized_ into a JSON string, |
| 60 which is then passed between a client and server, | 56 which is then passed between a client and server, |
| 61 and revived as an object at its destination. | 57 and revived as an object at its destination. |
| 62 This target shows you how to use functions in the | 58 This tutorial shows you how to use functions in the |
| 63 <a href="https://api.dartlang.org/dart_json.html" | 59 <a href="https://api.dartlang.org/dart_json.html" |
| 64 target="_blank">dart:json</a> | 60 target="_blank">dart:json</a> |
| 65 library to produce and consume JSON data. | 61 library to produce and consume JSON data. |
| 66 Because JSON data is typically loaded dynamically, | 62 Because JSON data is typically loaded dynamically, |
| 67 this target also shows how a web app | 63 this tutorial also shows how a web app |
| 68 can use an HTTP request to get data from an HTTP server. | 64 can use an HTTP request to get data from an HTTP server. |
| 69 For web apps, | 65 For web apps, |
| 70 HTTP requests are served by the browser in which the app is running, | 66 HTTP requests are served by the browser in which the app is running, |
| 71 and thus are subject to the browser's security restrictions. | 67 and thus are subject to the browser's security restrictions. |
| 72 | 68 |
| 73 * [About JSON](#about-json) | 69 * [About JSON](#about-json) |
| 74 * [Serializing data into JSON](#serializing-data-into-json) | 70 * [Serializing data into JSON](#serializing-data-into-json) |
| 75 * [Parsing JSON data](#parsing-json-data) | 71 * [Parsing JSON data](#parsing-json-data) |
| 76 * [About URIs and HTTP requests](#about-uris) | 72 * [About URIs and HTTP requests](#about-uris) |
| 77 * [Using the getString() function to load a file](#using-getString-function) | 73 * [Using the getString() function to load a file](#using-getString-function) |
| 78 * [Using an HttpRequest object to load a file](#making-a-get-request) | 74 * [Using an HttpRequest object to load a file](#making-a-get-request) |
| 79 * [Other resources](#other-resources) | 75 * [Other resources](#other-resources) |
| 80 | 76 |
| 81 ##About JSON | 77 ##About JSON |
| 82 | 78 |
| 83 The JSON data format is easy for humans | 79 The JSON data format is easy for humans |
| 84 to write and read because it is lightweight and text based. | 80 to write and read because it is lightweight and text based. |
| 85 With JSON, various data types | 81 With JSON, various data types |
| 86 and simple data structures such as lists and maps | 82 and simple data structures such as lists and maps |
| 87 can be serialized and represented by strings. | 83 can be serialized and represented by strings. |
| 88 | 84 |
| 89 **Try it!** | 85 **Try it!** |
| 90 The app running below, `its_all_about_you`, | 86 The app running below, `its_all_about_you`, |
| 91 displays the JSON string for data of various types. | 87 displays the JSON string for data of various types. |
| 92 Change the values of the input elements | 88 Change the values of the input elements |
| 93 and check out the JSON format for each data type. | 89 and check out the JSON format for each data type. |
| 94 | 90 |
| 95 <iframe class="running-app-frame" | 91 <iframe class="running-app-frame" |
| 96 style="height:500px;width:700px;" | 92 style="height:500px;width:700px;" |
| 97 src="http://dart-lang.github.io/dart-tutorials-samples/web/target09/its_
all_about_you/web/out/its_all_about_you.html"> | 93 src="examples/its_all_about_you/out/web/index.html"> |
| 98 </iframe> | 94 </iframe> |
| 99 | 95 |
| 100 The complete source code is available on github: | 96 The complete source code is available on github: |
| 101 <a href="https://github.com/dart-lang/dart-tutorials-samples/tree/master/web/tar
get09/its_all_about_you" | 97 <a href="https://github.com/dart-lang/dart-tutorials-samples/tree/master/web/fet
chdata/its_all_about_you" |
| 102 target="_blank">its_all_about_you</a>. | 98 target="_blank">its_all_about_you</a>. |
| 103 Because this application uses the Web UI package, | |
| 104 you need to compile as described in | |
| 105 <a href="/docs/tutorials/web-ui/">Target 6: Get Started with Web UI</a>. | |
| 106 | 99 |
| 107 The dart:json library contains two top-level functions | 100 The dart:json library contains two top-level functions |
| 108 for working with JSON strings: | 101 for working with JSON strings: |
| 109 | 102 |
| 110 | dart:json function | Description | | 103 | dart:json function | Description | |
| 111 |---|---| | 104 |---|---| |
| 112 | <a href="https://api.dartlang.org/dart_json.html" target="_blank">parse()</a>
| Builds Dart objects from a string containing JSON data. | | 105 | <a href="https://api.dartlang.org/dart_json.html" target="_blank">parse()</a>
| Builds Dart objects from a string containing JSON data. | |
| 113 | <a href="https://api.dartlang.org/dart_json.html" target="_blank">stringify()<
/a> | Serializes a Dart object into a JSON string. | | 106 | <a href="https://api.dartlang.org/dart_json.html" target="_blank">stringify()<
/a> | Serializes a Dart object into a JSON string. | |
| 114 {: .table} | 107 {: .table} |
| 115 | 108 |
| (...skipping 170 matching lines...) Expand 10 before | Expand all | Expand 10 after Loading... |
| 286 `portmanteaux_simple`, includes a data file | 279 `portmanteaux_simple`, includes a data file |
| 287 called `portmanteaux_simple.json` that contains a JSON-formatted list of words. | 280 called `portmanteaux_simple.json` that contains a JSON-formatted list of words. |
| 288 When you click the button, | 281 When you click the button, |
| 289 the app makes a GET request of the server | 282 the app makes a GET request of the server |
| 290 and loads the file. | 283 and loads the file. |
| 291 | 284 |
| 292 **Try it!** Click the button. | 285 **Try it!** Click the button. |
| 293 | 286 |
| 294 <iframe class="running-app-frame" | 287 <iframe class="running-app-frame" |
| 295 style="height:400px;width:300px;" | 288 style="height:400px;width:300px;" |
| 296 src="http://dart-lang.github.io/dart-tutorials-samples/web/target09/port
manteaux_simple/web/portmanteaux_simple.html"> | 289 src="examples/portmanteaux_simple/portmanteaux_simple.html"> |
| 297 </iframe> | 290 </iframe> |
| 298 | 291 |
| 299 You can find the complete source code for this sample on github at | 292 You can find the complete source code for this sample on github at |
| 300 <a href="https://github.com/dart-lang/dart-tutorials-samples/tree/master/web/tar
get09/portmanteaux_simple/" | 293 <a href="https://github.com/dart-lang/dart-tutorials-samples/tree/master/web/fet
chdata/portmanteaux_simple/" |
| 301 target="_blank">portmanteaux_simple</a>. | 294 target="_blank">portmanteaux_simple</a>. |
| 302 | 295 |
| 303 This program uses a convenience method, | 296 This program uses a convenience method, |
| 304 `getString()`, | 297 `getString()`, |
| 305 provided by the HttpRequest class | 298 provided by the HttpRequest class |
| 306 to request the file from the server. | 299 to request the file from the server. |
| 307 | 300 |
| 308  | 301  |
| 309 | 302 |
| 310 The getString() method uses a Future object to handle the request. | 303 The getString() method uses a Future object to handle the request. |
| (...skipping 62 matching lines...) Expand 10 before | Expand all | Expand 10 after Loading... |
| 373 you need to create an HttpRequest object, | 366 you need to create an HttpRequest object, |
| 374 configure its header and other information, | 367 configure its header and other information, |
| 375 and use the `send()` method to make the request. | 368 and use the `send()` method to make the request. |
| 376 | 369 |
| 377 This section looks at a new | 370 This section looks at a new |
| 378 version of the portmanteaux example | 371 version of the portmanteaux example |
| 379 that has been rewritten | 372 that has been rewritten |
| 380 to use an explicitly constructed HttpRequest object. | 373 to use an explicitly constructed HttpRequest object. |
| 381 You can find the complete source code for the modified version | 374 You can find the complete source code for the modified version |
| 382 on github at | 375 on github at |
| 383 <a href="https://github.com/dart-lang/dart-tutorials-samples/tree/master/web/tar
get09/portmanteaux/" | 376 <a href="https://github.com/dart-lang/dart-tutorials-samples/tree/master/web/fet
chdata/portmanteaux/" |
| 384 target="_blank">portmanteaux</a>. | 377 target="_blank">portmanteaux</a>. |
| 385 | 378 |
| 386 ###Setting up the HttpRequest object | 379 ###Setting up the HttpRequest object |
| 387 | 380 |
| 388 The mouse-click handler for the button | 381 The mouse-click handler for the button |
| 389 creates an HttpRequest object, | 382 creates an HttpRequest object, |
| 390 configures it with a URI and callback function, | 383 configures it with a URI and callback function, |
| 391 and then sends the request. | 384 and then sends the request. |
| 392 Let's take a look at the Dart code: | 385 Let's take a look at the Dart code: |
| 393 | 386 |
| (...skipping 39 matching lines...) Expand 10 before | Expand all | Expand 10 after Loading... |
| 433 the code easily converts the JSON-formatted list of words | 426 the code easily converts the JSON-formatted list of words |
| 434 to a Dart list of strings, | 427 to a Dart list of strings, |
| 435 creates a new LIElement for each one, | 428 creates a new LIElement for each one, |
| 436 and adds it to the <ul> element on the page. | 429 and adds it to the <ul> element on the page. |
| 437 | 430 |
| 438  | 431  |
| 439 | 432 |
| 440 ###Populating the UI from JSON | 433 ###Populating the UI from JSON |
| 441 | 434 |
| 442 The data file in the portmanteaux example, | 435 The data file in the portmanteaux example, |
| 443 <a href="https://github.com/dart-lang/dart-tutorials-samples/master/web/target09
/portmanteaux/web/portmanteaux.json" | 436 <a href="https://github.com/dart-lang/dart-tutorials-samples/master/web/fetchdat
a/portmanteaux/web/portmanteaux.json" |
| 444 target="_blank">portmanteaux.json</a>, | 437 target="_blank">portmanteaux.json</a>, |
| 445 contains a JSON-formatted list of strings. | 438 contains a JSON-formatted list of strings. |
| 446 | 439 |
| 447 {% highlight dart %} | 440 {% highlight dart %} |
| 448 [ | 441 [ |
| 449 "portmanteau", "fantabulous", "spork", "smog", | 442 "portmanteau", "fantabulous", "spork", "smog", |
| 450 "spanglish", "gerrymander", "turducken", "stagflation", | 443 "spanglish", "gerrymander", "turducken", "stagflation", |
| 451 "Brangelina", "freeware", "oxbridge", "palimony", | 444 "Brangelina", "freeware", "oxbridge", "palimony", |
| 452 "brunch", "blog", "chortle", "Hassenpfeffer", "Schnitzelbank" | 445 "brunch", "blog", "chortle", "Hassenpfeffer", "Schnitzelbank" |
| 453 ] | 446 ] |
| (...skipping 12 matching lines...) Expand all Loading... |
| 466 | 459 |
| 467 Check out Chris Buckett's article, | 460 Check out Chris Buckett's article, |
| 468 <a href="/articles/json-web-service/" | 461 <a href="/articles/json-web-service/" |
| 469 target="_blank">Using Dart with JSON Web Services</a>, | 462 target="_blank">Using Dart with JSON Web Services</a>, |
| 470 for more information and an example with source code for both | 463 for more information and an example with source code for both |
| 471 client and server programs. | 464 client and server programs. |
| 472 | 465 |
| 473 {% endcapture %} | 466 {% endcapture %} |
| 474 | 467 |
| 475 {% include tutorial.html %} | 468 {% include tutorial.html %} |
| OLD | NEW |