--- /dev/null Thu Jan 01 00:00:00 1970 +0000
+++ b/src/cm/media/js/lib/yui/yui_3.10.3/docs/json/json-convert-values.html Tue Jul 16 14:29:46 2013 +0200
@@ -0,0 +1,525 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+ <meta charset="utf-8">
+ <title>Example: Adding New Object Members During Parsing</title>
+ <link rel="stylesheet" href="http://fonts.googleapis.com/css?family=PT+Sans:400,700,400italic,700italic">
+ <link rel="stylesheet" href="../../build/cssgrids/cssgrids-min.css">
+ <link rel="stylesheet" href="../assets/css/main.css">
+ <link rel="stylesheet" href="../assets/vendor/prettify/prettify-min.css">
+ <link rel="shortcut icon" type="image/png" href="../assets/favicon.png">
+ <script src="../../build/yui/yui-min.js"></script>
+
+</head>
+<body>
+<!--
+<a href="https://github.com/yui/yui3"><img style="position: absolute; top: 0; right: 0; border: 0;" src="https://s3.amazonaws.com/github/ribbons/forkme_right_darkblue_121621.png" alt="Fork me on GitHub"></a>
+-->
+<div id="doc">
+ <div id="hd">
+ <h1><img src="http://yuilibrary.com/img/yui-logo.png"></h1>
+ </div>
+
+
+ <h1>Example: Adding New Object Members During Parsing</h1>
+ <div class="yui3-g">
+ <div class="yui3-u-3-4">
+ <div id="main">
+ <div class="content"><div class="intro">
+<p>
+ This example shows how to use the <code>reviver</code> parameter in <code>JSON.parse()</code> to add new object members and format existing members during the parsing phase.
+</p>
+</div>
+
+<div class="example yui3-skin-sam">
+ <div id="demo">
+ <p>Choose a currency, then get the data</p>
+ <select>
+ <option value="ARS">Argentine Peso</option>
+ <option value="AUD">Australian Dollar</option>
+ <option value="BRL">Brazilian Real</option>
+ <option value="GBP">British Pound</option>
+ <option value="CAD">Canadian Dollar</option>
+ <option value="CNY">Chinese Yuan</option>
+ <option value="COP">Colombian Peso</option>
+ <option value="HRK">Croatian Kuna</option>
+ <option value="CZK">Czech Koruna</option>
+ <option value="DKK">Danish Krone</option>
+ <option value="EEK">Estonian Kroon</option>
+ <option value="EUR">Euro</option>
+ <option value="HKD">Hong Kong Dollar</option>
+ <option value="HUF">Hungarian Forint</option>
+ <option value="ISK">Iceland Krona</option>
+ <option value="INR">Indian Rupee</option>
+ <option value="JPY">Japanese Yen</option>
+ <option value="KRW">Korean Won</option>
+ <option value="LVL">Latvian Lat</option>
+ <option value="LTL">Lithuanian Lita</option>
+ <option value="MYR">Malaysian Ringgit</option>
+ <option value="MXN">Mexican Peso</option>
+ <option value="NZD">New Zealand Dollar</option>
+ <option value="NOK">Norwegian Krone</option>
+ <option value="PHP">Philippine Peso</option>
+ <option value="PLN">Polish Zloty</option>
+ <option value="RUB">Russian Rouble</option>
+ <option value="SGD">Singapore Dollar</option>
+ <option value="SKK">Slovak Koruna</option>
+ <option value="ZAR">South African Rand</option>
+ <option value="LKR">Sri Lanka Rupee</option>
+ <option value="SEK">Swedish Krona</option>
+ <option value="TRY">Turkey Lira</option>
+ <option value="USD" selected="selected">U.S. Dollar</option>
+ <option value="CHF">Swiss Franc</option>
+ <option value="TWD">Taiwan Dollar</option>
+ <option value="THB">Thai Baht</option>
+ </select>
+ <input type="button" id="demo_go" value="Get Data">
+
+ <table cellspacing="0">
+ <caption>Inventory</caption>
+ <thead>
+ <tr>
+ <th>SKU</th>
+ <th>Item</th>
+ <th>Price (USD)</th>
+ <th>Price (<span>USD</span>)</th>
+ </tr>
+ </thead>
+ <tbody>
+ <tr><td colspan="4">Click <em>Get Data</em></td></tr>
+ </tbody>
+ </table>
+</div>
+
+<script>
+YUI().use("node", "io", "json-parse",function (Y) {
+
+// Safari 4.0.3's native JSON does not support adding members during parse,
+// so use JavaScript implementation for consistency
+Y.JSON.useNativeParse = false;
+
+var example = {
+ rates : {"USD":1,"EUR":0.6661,"GBP":0.5207,"AUD":1.1225,"BRL":1.609,"NZD":1.4198,"CAD":1.0667,"CHF":1.0792,"CNY":6.8587 ,"DKK":4.9702,"HKD":7.8064,"INR":42.0168,"JPY":109.8901,"KRW":1000,"LKR":107.5269,"MXN":10.1317,"MYR" :3.3167,"NOK":5.3277,"SEK":6.2617,"SGD":1.4073,"THB":33.7838,"TWD":31.1526,"VEF":2.1445,"ZAR":7.6923 ,"BGN":1.3028,"CZK":16.0514,"EEK":10.4275,"HUF":158.7302,"LTL":2.2999,"LVL":0.4692,"PLN":2.1758,"RON" :2.3804,"SKK":20.2429,"ISK":4.8008,"HRK":81.3008,"RUB":24.3309,"TRY":1.1811,"PHP":44.2478,"COP":2000 ,"ARS":3.1289},
+
+ currency : 'USD',
+
+ convert : function (k,v) {
+ // 'this' will refer to the object containing the key:value pair,
+ // so this step will add a new object member while leaving the original
+ // intact (but formatted to two decimal places). If the original
+ // is not needed, just return the converted value.
+ if (k === 'Price') {
+ var x = Math.round(v * example.rates[example.currency] * 100) / 100;
+ this.convertedPrice = x.toFixed(2); // added to item
+ return v.toFixed(2); // assigned to item.Price
+ }
+ return v;
+ },
+
+ updateTable : function (inventory) {
+ // Update the column header
+ Y.one('#demo table th span').set('innerHTML',example.currency);
+
+ var tbody = Y.one('#demo table tbody'),
+ html = ['<table><tbody>'],
+ rowTemplate = '<tr><td>{SKU}</td><td>{Item}</td><td>{Price}</td><td>{convertedPrice}</td></tr>',
+ i, len;
+
+ if (inventory) {
+ for (i = 0, len = inventory.length; i < len; ++i) {
+ html.push(Y.Lang.sub(rowTemplate, inventory[i]));
+ }
+ } else {
+ html.push('<tr><td colspan="4">No Inventory data</td></tr>');
+ }
+
+ html.push('</tbody></table>');
+
+ tbody.replace(Y.Node.create(html.join('')).one('tbody'));
+ }
+};
+
+Y.one('#demo_go').on('click', function (e) {
+ // Disable the button temporarily
+ this.set('disabled',true);
+
+ // Store the requested currency
+ var sel = Y.one("#demo select");
+ example.currency = sel.get("options").item(sel.get("selectedIndex")).get("value");
+
+ Y.io('../assets/json/json-convert-values-response.json',{
+ timeout : 3000,
+ on : {
+ success : function (xid, res) {
+ var inventory;
+ try {
+ inventory = Y.JSON.parse(res.responseText,example.convert);
+
+ example.updateTable(inventory);
+ }
+ catch(e) {
+ alert("Error getting inventory data");
+ }
+ finally {
+ Y.one('#demo_go').set('disabled',false);
+ }
+ },
+ failure : function () {
+ alert("Error getting inventory data");
+ }
+ }
+ });
+});
+
+// Expose example objects for inspection
+YUI.example = example;
+});
+</script>
+
+</div>
+
+<h2>The Data</h2>
+<p>
+ The data returned from the server will be a JSON string containing this object structure:
+</p>
+
+<pre class="code prettyprint lang-json">[
+ {"SKU":"23-23874", "Price":23.99, "Item":"Helmet"},
+ {"SKU":"48-38835", "Price":14.97, "Item":"Football"},
+ {"SKU":"84-84848", "Price":3.49, "Item":"Goggles"},
+ {"SKU":"84-84843", "Price":183, "Item":"Badminton Set"},
+ {"SKU":"84-39321", "Price":6.79, "Item":"Tennis Balls"},
+ {"SKU":"39-48949", "Price":618, "Item":"Snowboard"},
+ {"SKU":"99-28128", "Price":78.99, "Item":"Cleats"},
+ {"SKU":"83-48281", "Price":4.69, "Item":"Volleyball"},
+ {"SKU":"89-32811", "Price":0.59, "Item":"Sweatband"},
+ {"SKU":"28-22847", "Price":779.98, "Item":"Golf Set"},
+ {"SKU":"38-38281", "Price":8.25, "Item":"Basketball Shorts"},
+ {"SKU":"82-38333", "Price":1.39, "Item":"Lip balm"},
+ {"SKU":"21-38485", "Price":0.07, "Item":"Ping Pong ball"},
+ {"SKU":"83-38285", "Price":3.99, "Item":"Hockey Puck"}
+]</pre>
+
+
+<h2>Create a <code>reviver</code> function</h2>
+<p>
+ We'll contain all the moving parts in an <code>example</code> namespace. In it, we'll include the currency exchange rates and a function to reference the rates to add a new member to the JSON response as it is being parsed.
+</p>
+
+<pre class="code prettyprint">YUI().use("node", "io", "json-parse",function (Y) {
+
+var example = {
+ rates : {"USD":1,"EUR":0.6661,...,"COP":2000 ,"ARS":3.1289},
+
+ currency : 'USD', // updated by the select element
+
+ convert : function (k,v) {
+ // 'this' will refer to the object containing the key:value pair,
+ // so this step will add a new object member while leaving the original
+ // intact (but formatted to two decimal places). If the original
+ // is not needed, just return the converted value.
+ if (k === 'Price') {
+ var x = Math.round(v * example.rates[example.currency] * 100) / 100;
+ this.convertedPrice = x.toFixed(2); // added to item
+ return v.toFixed(2); // assigned to item.Price
+ }
+ return v;
+ },
+ …
+};
+…</pre>
+
+
+<h2>Sending the request and parsing the JSON response</h2>
+<p>
+ When the <em>Get Data</em> button is clicked, we send an io request for the JSON data, and in our <code>success</code> handler, pass our conversion function to <code>JSON.parse()</code> with the response text. The resulting inventory records will have an additional member, <code>convertedPrice</code>. This data is then passed to a UI method to update the inventory table.
+</p>
+
+<pre class="code prettyprint">Y.one('#demo_go').on('click', function (e) {
+ // Disable the button temporarily
+ this.set('disabled',true);
+
+ // Store the requested currency
+ var sel = Y.one("#demo select");
+ example.currency = sel.get("options").item(sel.get("selectedIndex")).get("value");
+
+ // Send the request for the JSON data
+ Y.io('../assets/json/json-convert-values-response.json',{
+ timeout : 3000,
+ on : {
+ success : function (xid, res) {
+ var inventory;
+ try {
+ inventory = Y.JSON.parse(res.responseText,example.convert);
+
+ example.updateTable(inventory);
+ }
+ catch(e) {
+ alert("Error getting inventory data");
+ }
+ finally {
+ Y.one('#demo_go').set('disabled',false);
+ }
+ },
+ failure : function () {
+ alert("Error getting inventory data");
+ }
+ }
+ });
+});
+
+}); // End YUI(..).use(..,function (Y) {</pre>
+
+
+<h2>Complete Example Source</h2>
+
+<pre class="code prettyprint"><div id="demo">
+ <p>Choose a currency, then get the data</p>
+ <select>
+ <option value="ARS">Argentine Peso</option>
+ <option value="AUD">Australian Dollar</option>
+ <option value="BRL">Brazilian Real</option>
+ <option value="GBP">British Pound</option>
+ <option value="CAD">Canadian Dollar</option>
+ <option value="CNY">Chinese Yuan</option>
+ <option value="COP">Colombian Peso</option>
+ <option value="HRK">Croatian Kuna</option>
+ <option value="CZK">Czech Koruna</option>
+ <option value="DKK">Danish Krone</option>
+ <option value="EEK">Estonian Kroon</option>
+ <option value="EUR">Euro</option>
+ <option value="HKD">Hong Kong Dollar</option>
+ <option value="HUF">Hungarian Forint</option>
+ <option value="ISK">Iceland Krona</option>
+ <option value="INR">Indian Rupee</option>
+ <option value="JPY">Japanese Yen</option>
+ <option value="KRW">Korean Won</option>
+ <option value="LVL">Latvian Lat</option>
+ <option value="LTL">Lithuanian Lita</option>
+ <option value="MYR">Malaysian Ringgit</option>
+ <option value="MXN">Mexican Peso</option>
+ <option value="NZD">New Zealand Dollar</option>
+ <option value="NOK">Norwegian Krone</option>
+ <option value="PHP">Philippine Peso</option>
+ <option value="PLN">Polish Zloty</option>
+ <option value="RUB">Russian Rouble</option>
+ <option value="SGD">Singapore Dollar</option>
+ <option value="SKK">Slovak Koruna</option>
+ <option value="ZAR">South African Rand</option>
+ <option value="LKR">Sri Lanka Rupee</option>
+ <option value="SEK">Swedish Krona</option>
+ <option value="TRY">Turkey Lira</option>
+ <option value="USD" selected="selected">U.S. Dollar</option>
+ <option value="CHF">Swiss Franc</option>
+ <option value="TWD">Taiwan Dollar</option>
+ <option value="THB">Thai Baht</option>
+ </select>
+ <input type="button" id="demo_go" value="Get Data">
+
+ <table cellspacing="0">
+ <caption>Inventory</caption>
+ <thead>
+ <tr>
+ <th>SKU</th>
+ <th>Item</th>
+ <th>Price (USD)</th>
+ <th>Price (<span>USD</span>)</th>
+ </tr>
+ </thead>
+ <tbody>
+ <tr><td colspan="4">Click <em>Get Data</em></td></tr>
+ </tbody>
+ </table>
+</div>
+
+<script>
+YUI().use("node", "io", "json-parse",function (Y) {
+
+// Safari 4.0.3's native JSON does not support adding members during parse,
+// so use JavaScript implementation for consistency
+Y.JSON.useNativeParse = false;
+
+var example = {
+ rates : {"USD":1,"EUR":0.6661,"GBP":0.5207,"AUD":1.1225,"BRL":1.609,"NZD":1.4198,"CAD":1.0667,"CHF":1.0792,"CNY":6.8587 ,"DKK":4.9702,"HKD":7.8064,"INR":42.0168,"JPY":109.8901,"KRW":1000,"LKR":107.5269,"MXN":10.1317,"MYR" :3.3167,"NOK":5.3277,"SEK":6.2617,"SGD":1.4073,"THB":33.7838,"TWD":31.1526,"VEF":2.1445,"ZAR":7.6923 ,"BGN":1.3028,"CZK":16.0514,"EEK":10.4275,"HUF":158.7302,"LTL":2.2999,"LVL":0.4692,"PLN":2.1758,"RON" :2.3804,"SKK":20.2429,"ISK":4.8008,"HRK":81.3008,"RUB":24.3309,"TRY":1.1811,"PHP":44.2478,"COP":2000 ,"ARS":3.1289},
+
+ currency : 'USD',
+
+ convert : function (k,v) {
+ // 'this' will refer to the object containing the key:value pair,
+ // so this step will add a new object member while leaving the original
+ // intact (but formatted to two decimal places). If the original
+ // is not needed, just return the converted value.
+ if (k === 'Price') {
+ var x = Math.round(v * example.rates[example.currency] * 100) / 100;
+ this.convertedPrice = x.toFixed(2); // added to item
+ return v.toFixed(2); // assigned to item.Price
+ }
+ return v;
+ },
+
+ updateTable : function (inventory) {
+ // Update the column header
+ Y.one('#demo table th span').set('innerHTML',example.currency);
+
+ var tbody = Y.one('#demo table tbody'),
+ html = ['<table><tbody>'],
+ rowTemplate = '<tr><td>{SKU}</td><td>{Item}</td><td>{Price}</td><td>{convertedPrice}</td></tr>',
+ i, len;
+
+ if (inventory) {
+ for (i = 0, len = inventory.length; i < len; ++i) {
+ html.push(Y.Lang.sub(rowTemplate, inventory[i]));
+ }
+ } else {
+ html.push('<tr><td colspan="4">No Inventory data</td></tr>');
+ }
+
+ html.push('</tbody></table>');
+
+ tbody.replace(Y.Node.create(html.join('')).one('tbody'));
+ }
+};
+
+Y.one('#demo_go').on('click', function (e) {
+ // Disable the button temporarily
+ this.set('disabled',true);
+
+ // Store the requested currency
+ var sel = Y.one("#demo select");
+ example.currency = sel.get("options").item(sel.get("selectedIndex")).get("value");
+
+ Y.io('../assets/json/json-convert-values-response.json',{
+ timeout : 3000,
+ on : {
+ success : function (xid, res) {
+ var inventory;
+ try {
+ inventory = Y.JSON.parse(res.responseText,example.convert);
+
+ example.updateTable(inventory);
+ }
+ catch(e) {
+ alert("Error getting inventory data");
+ }
+ finally {
+ Y.one('#demo_go').set('disabled',false);
+ }
+ },
+ failure : function () {
+ alert("Error getting inventory data");
+ }
+ }
+ });
+});
+
+// Expose example objects for inspection
+YUI.example = example;
+});
+</script></pre>
+
+</div>
+ </div>
+ </div>
+
+ <div class="yui3-u-1-4">
+ <div class="sidebar">
+
+
+
+ <div class="sidebox">
+ <div class="hd">
+ <h2 class="no-toc">Examples</h2>
+ </div>
+
+ <div class="bd">
+ <ul class="examples">
+
+
+ <li data-description="Use JSON to parse data received via XMLHttpRequest via Y.io calls — a simple JSON use case.">
+ <a href="json-connect.html">JSON with Y.io</a>
+ </li>
+
+
+
+ <li data-description="Use the replacer and reviver parameters to reconstitute object instances that have been serialized to JSON.">
+ <a href="json-freeze-thaw.html">Rebuilding Class Instances from JSON Data</a>
+ </li>
+
+
+
+ <li data-description="Use a currency conversion calculation to add a new price member to a JSON response, demonstrating how JSON data, once retrieved, can be transformed during parsing.">
+ <a href="json-convert-values.html">Adding New Object Members During Parsing</a>
+ </li>
+
+
+
+
+
+
+ </ul>
+ </div>
+ </div>
+
+
+
+ <div class="sidebox">
+ <div class="hd">
+ <h2 class="no-toc">Examples That Use This Component</h2>
+ </div>
+
+ <div class="bd">
+ <ul class="examples">
+
+
+
+
+
+
+
+
+ <li data-description="A basic todo list built with the Model, Model List, and View components.">
+ <a href="../app/app-todo.html">Todo List</a>
+ </li>
+
+
+
+ <li data-description="Portal style example using Drag & Drop Event Bubbling and Animation.">
+ <a href="../dd/portal-drag.html">Portal Style Example</a>
+ </li>
+
+
+ </ul>
+ </div>
+ </div>
+
+ </div>
+ </div>
+ </div>
+</div>
+
+<script src="../assets/vendor/prettify/prettify-min.js"></script>
+<script>prettyPrint();</script>
+
+<script>
+YUI.Env.Tests = {
+ examples: [],
+ project: '../assets',
+ assets: '../assets/json',
+ name: 'json-convert-values',
+ title: 'Adding New Object Members During Parsing',
+ newWindow: '',
+ auto: false
+};
+YUI.Env.Tests.examples.push('json-connect');
+YUI.Env.Tests.examples.push('json-freeze-thaw');
+YUI.Env.Tests.examples.push('json-convert-values');
+YUI.Env.Tests.examples.push('app-todo');
+YUI.Env.Tests.examples.push('portal-drag');
+
+</script>
+<script src="../assets/yui/test-runner.js"></script>
+
+
+
+</body>
+</html>