| 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:convert library provides support for JSON. | 18 * The dart:convert 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> This tutorial features these examples:</p> |
| 26 * its_all_about_you |
| 27 * portmanteaux_simple |
| 28 * portmanteaux |
| 29 |
| 25 <p> | 30 <p> |
| 26 Get the source code for the samples featured in this tutorial:</p> | 31 Don't have the source code? |
| 27 | 32 <a href="https://github.com/dart-lang/dart-tutorials-samples/archive/master.zip"
> |
| 28 <ul> | 33 Download it. |
| 29 <li> | 34 </a> |
| 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> | |
| 32 </li> | |
| 33 <li> | |
| 34 <a href="https://github.com/dart-lang/dart-tutorials-samples/tree/master/web
/fetchdata/portmanteaux_simple" | |
| 35 target="_blank">portmanteaux_simple</a> | |
| 36 </li> | |
| 37 <li> | |
| 38 <a href="https://github.com/dart-lang/dart-tutorials-samples/tree/master/web
/fetchdata/portmanteaux" | |
| 39 target="_blank">portmanteaux</a> | |
| 40 </li> | |
| 41 </ul> | |
| 42 | 35 |
| 43 {% endcapture %} | 36 {% endcapture %} |
| 44 | 37 |
| 45 {% capture content %} | 38 {% capture content %} |
| 46 | 39 |
| 47 <div class="tute-target-title"> | 40 <div class="tute-target-title"> |
| 48 <h1>{{page.title}}</h1> | 41 <h1>{{page.title}}</h1> |
| 49 <h3>Get data from a file or server.</h3> | 42 <h3>Get data from a file or server.</h3> |
| 50 </div> | 43 </div> |
| 51 | 44 |
| (...skipping 35 matching lines...) Expand 10 before | Expand all | Expand 10 after Loading... |
| 87 The app running below, `its_all_about_you`, | 80 The app running below, `its_all_about_you`, |
| 88 displays the JSON string for data of various types. | 81 displays the JSON string for data of various types. |
| 89 Change the values of the input elements | 82 Change the values of the input elements |
| 90 and check out the JSON format for each data type. | 83 and check out the JSON format for each data type. |
| 91 | 84 |
| 92 <iframe class="running-app-frame" | 85 <iframe class="running-app-frame" |
| 93 style="height:500px;width:700px;" | 86 style="height:500px;width:700px;" |
| 94 src="examples/its_all_about_you/out/web/index.html"> | 87 src="examples/its_all_about_you/out/web/index.html"> |
| 95 </iframe> | 88 </iframe> |
| 96 | 89 |
| 97 The complete source code is available on github: | |
| 98 <a href="https://github.com/dart-lang/dart-tutorials-samples/tree/master/web/fet
chdata/its_all_about_you" | |
| 99 target="_blank">its_all_about_you</a>. | |
| 100 | |
| 101 The dart:convert library contains two convenient functions | 90 The dart:convert library contains two convenient functions |
| 102 for working with JSON strings: | 91 for working with JSON strings: |
| 103 | 92 |
| 104 | dart:convert function | Description | | 93 | dart:convert function | Description | |
| 105 |---|---| | 94 |---|---| |
| 106 | <a href="https://api.dartlang.org/dart_convert.html" target="_blank">JSON.deco
de()</a> | Builds Dart objects from a string containing JSON data. | | 95 | <a href="https://api.dartlang.org/dart_convert.html" target="_blank">JSON.deco
de()</a> | Builds Dart objects from a string containing JSON data. | |
| 107 | <a href="https://api.dartlang.org/dart_convert.html" target="_blank">JSON.enco
de()</a> | Serializes a Dart object into a JSON string. | | 96 | <a href="https://api.dartlang.org/dart_convert.html" target="_blank">JSON.enco
de()</a> | Serializes a Dart object into a JSON string. | |
| 108 {: .table} | 97 {: .table} |
| 109 | 98 |
| 110 To use these functions, | 99 To use these functions, |
| (...skipping 171 matching lines...) Expand 10 before | Expand all | Expand 10 after Loading... |
| 282 the app makes a GET request of the server | 271 the app makes a GET request of the server |
| 283 and loads the file. | 272 and loads the file. |
| 284 | 273 |
| 285 **Try it!** Click the button. | 274 **Try it!** Click the button. |
| 286 | 275 |
| 287 <iframe class="running-app-frame" | 276 <iframe class="running-app-frame" |
| 288 style="height:400px;width:300px;" | 277 style="height:400px;width:300px;" |
| 289 src="examples/portmanteaux_simple/portmanteaux_simple.html"> | 278 src="examples/portmanteaux_simple/portmanteaux_simple.html"> |
| 290 </iframe> | 279 </iframe> |
| 291 | 280 |
| 292 You can find the complete source code for this sample on github at | |
| 293 <a href="https://github.com/dart-lang/dart-tutorials-samples/tree/master/web/fet
chdata/portmanteaux_simple/" | |
| 294 target="_blank">portmanteaux_simple</a>. | |
| 295 | |
| 296 This program uses a convenience method, | 281 This program uses a convenience method, |
| 297 `getString()`, | 282 `getString()`, |
| 298 provided by the HttpRequest class | 283 provided by the HttpRequest class |
| 299 to request the file from the server. | 284 to request the file from the server. |
| 300 | 285 |
| 301  | 286  |
| 302 | 287 |
| 303 The getString() method uses a Future object to handle the request. | 288 The getString() method uses a Future object to handle the request. |
| 304 You can use the code above as an idiom | 289 You can use the code above as an idiom |
| 305 and provide your own code for the body of the processString() function | 290 and provide your own code for the body of the processString() function |
| (...skipping 55 matching lines...) Expand 10 before | Expand all | Expand 10 after Loading... |
| 361 ##Using an HttpRequest object to load a file {#making-a-get-request} | 346 ##Using an HttpRequest object to load a file {#making-a-get-request} |
| 362 | 347 |
| 363 The getString() method is good for an HTTP GET request that returns | 348 The getString() method is good for an HTTP GET request that returns |
| 364 a string loaded from the resource. | 349 a string loaded from the resource. |
| 365 For different cases, | 350 For different cases, |
| 366 you need to create an HttpRequest object, | 351 you need to create an HttpRequest object, |
| 367 configure its header and other information, | 352 configure its header and other information, |
| 368 and use the `send()` method to make the request. | 353 and use the `send()` method to make the request. |
| 369 | 354 |
| 370 This section looks at a new | 355 This section looks at a new |
| 371 version of the portmanteaux example | 356 version of the portmanteaux example, |
| 357 called portmanteaux, |
| 372 that has been rewritten | 358 that has been rewritten |
| 373 to use an explicitly constructed HttpRequest object. | 359 to use an explicitly constructed HttpRequest object. |
| 374 You can find the complete source code for the modified version | |
| 375 on github at | |
| 376 <a href="https://github.com/dart-lang/dart-tutorials-samples/tree/master/web/fet
chdata/portmanteaux/" | |
| 377 target="_blank">portmanteaux</a>. | |
| 378 | 360 |
| 379 ###Setting up the HttpRequest object | 361 ###Setting up the HttpRequest object |
| 380 | 362 |
| 381 The mouse-click handler for the button | 363 The mouse-click handler for the button |
| 382 creates an HttpRequest object, | 364 creates an HttpRequest object, |
| 383 configures it with a URI and callback function, | 365 configures it with a URI and callback function, |
| 384 and then sends the request. | 366 and then sends the request. |
| 385 Let's take a look at the Dart code: | 367 Let's take a look at the Dart code: |
| 386 | 368 |
| 387  | 369  |
| (...skipping 38 matching lines...) Expand 10 before | Expand all | Expand 10 after Loading... |
| 426 the code easily converts the JSON-formatted list of words | 408 the code easily converts the JSON-formatted list of words |
| 427 to a Dart list of strings, | 409 to a Dart list of strings, |
| 428 creates a new LIElement for each one, | 410 creates a new LIElement for each one, |
| 429 and adds it to the <ul> element on the page. | 411 and adds it to the <ul> element on the page. |
| 430 | 412 |
| 431  | 413  |
| 432 | 414 |
| 433 ###Populating the UI from JSON | 415 ###Populating the UI from JSON |
| 434 | 416 |
| 435 The data file in the portmanteaux example, | 417 The data file in the portmanteaux example, |
| 436 <a href="https://github.com/dart-lang/dart-tutorials-samples/master/web/fetchdat
a/portmanteaux/web/portmanteaux.json" | 418 portmanteaux.json, |
| 437 target="_blank">portmanteaux.json</a>, | |
| 438 contains a JSON-formatted list of strings. | 419 contains a JSON-formatted list of strings. |
| 439 | 420 |
| 440 {% highlight dart %} | 421 {% highlight dart %} |
| 441 [ | 422 [ |
| 442 "portmanteau", "fantabulous", "spork", "smog", | 423 "portmanteau", "fantabulous", "spork", "smog", |
| 443 "spanglish", "gerrymander", "turducken", "stagflation", | 424 "spanglish", "gerrymander", "turducken", "stagflation", |
| 444 "Brangelina", "freeware", "oxbridge", "palimony", | 425 "Brangelina", "freeware", "oxbridge", "palimony", |
| 445 "brunch", "blog", "chortle", "Hassenpfeffer", "Schnitzelbank" | 426 "brunch", "blog", "chortle", "Hassenpfeffer", "Schnitzelbank" |
| 446 ] | 427 ] |
| 447 {% endhighlight %} | 428 {% endhighlight %} |
| (...skipping 20 matching lines...) Expand all Loading... |
| 468 The next tutorial, | 449 The next tutorial, |
| 469 [Get Input from a Form](/docs/tutorials/forms/), | 450 [Get Input from a Form](/docs/tutorials/forms/), |
| 470 contains a client/server example that | 451 contains a client/server example that |
| 471 shows you how to use a form to get data from the user, | 452 shows you how to use a form to get data from the user, |
| 472 and using JSON, send that form to a server, | 453 and using JSON, send that form to a server, |
| 473 and handle the server's response. | 454 and handle the server's response. |
| 474 | 455 |
| 475 {% endcapture %} | 456 {% endcapture %} |
| 476 | 457 |
| 477 {% include tutorial.html %} | 458 {% include tutorial.html %} |
| OLD | NEW |