Chromium Code Reviews
chromiumcodereview-hr@appspot.gserviceaccount.com (chromiumcodereview-hr) | Please choose your nickname with Settings | Help | Chromium Project | Gerrit Changes | Sign out
(1174)

Side by Side Diff: src/site/docs/tutorials/fetchdata/index.markdown

Issue 275613002: Update polymer tutorial; make directory paths match new sample structure (Closed) Base URL: https://github.com/dart-lang/dartlang.org.git@master
Patch Set: probably nothing (oh app engine you joker) Created 6 years, 6 months ago
Use n/p to move between diff chunks; N/P to move between comments. Draft comments are only viewable by you.
Jump to:
View unified diff | Download patch
OLDNEW
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
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
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
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_&mdash;the computer 327 for referring to _this computer_&mdash;the computer
(...skipping 57 matching lines...) Expand 10 before | Expand all | Expand 10 after
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
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
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 %}
OLDNEW

Powered by Google App Engine
This is Rietveld 408576698