json-convert-values.mustache revision 819e90d415ed17d59af3a247b2ad9d6feb0c21b5
76ca635d61eb3f9fb7c9d788a44fa8b1690aa138Dav Glass<div class="intro">
76ca635d61eb3f9fb7c9d788a44fa8b1690aa138Dav Glass This example shows how to use the `reviver` parameter in `JSON.parse()` to add new object members and format existing members during the parsing phase.
76ca635d61eb3f9fb7c9d788a44fa8b1690aa138Dav Glass<div class="example yui3-skin-sam">
76ca635d61eb3f9fb7c9d788a44fa8b1690aa138Dav Glass {{>json-convert-values-source}}
76ca635d61eb3f9fb7c9d788a44fa8b1690aa138Dav Glass<h2>The Data</h2>
76ca635d61eb3f9fb7c9d788a44fa8b1690aa138Dav Glass The data returned from the server will be a JSON string containing this object structure:
76ca635d61eb3f9fb7c9d788a44fa8b1690aa138Dav Glass {"SKU":"23-23874", "Price":23.99, "Item":"Helmet"},
76ca635d61eb3f9fb7c9d788a44fa8b1690aa138Dav Glass {"SKU":"48-38835", "Price":14.97, "Item":"Football"},
76ca635d61eb3f9fb7c9d788a44fa8b1690aa138Dav Glass {"SKU":"84-84848", "Price":3.49, "Item":"Goggles"},
76ca635d61eb3f9fb7c9d788a44fa8b1690aa138Dav Glass {"SKU":"84-84843", "Price":183, "Item":"Badminton Set"},
76ca635d61eb3f9fb7c9d788a44fa8b1690aa138Dav Glass {"SKU":"84-39321", "Price":6.79, "Item":"Tennis Balls"},
76ca635d61eb3f9fb7c9d788a44fa8b1690aa138Dav Glass {"SKU":"39-48949", "Price":618, "Item":"Snowboard"},
76ca635d61eb3f9fb7c9d788a44fa8b1690aa138Dav Glass {"SKU":"99-28128", "Price":78.99, "Item":"Cleats"},
76ca635d61eb3f9fb7c9d788a44fa8b1690aa138Dav Glass {"SKU":"83-48281", "Price":4.69, "Item":"Volleyball"},
76ca635d61eb3f9fb7c9d788a44fa8b1690aa138Dav Glass {"SKU":"89-32811", "Price":0.59, "Item":"Sweatband"},
76ca635d61eb3f9fb7c9d788a44fa8b1690aa138Dav Glass {"SKU":"28-22847", "Price":779.98, "Item":"Golf Set"},
76ca635d61eb3f9fb7c9d788a44fa8b1690aa138Dav Glass {"SKU":"38-38281", "Price":8.25, "Item":"Basketball Shorts"},
76ca635d61eb3f9fb7c9d788a44fa8b1690aa138Dav Glass {"SKU":"82-38333", "Price":1.39, "Item":"Lip balm"},
76ca635d61eb3f9fb7c9d788a44fa8b1690aa138Dav Glass {"SKU":"21-38485", "Price":0.07, "Item":"Ping Pong ball"},
76ca635d61eb3f9fb7c9d788a44fa8b1690aa138Dav Glass {"SKU":"83-38285", "Price":3.99, "Item":"Hockey Puck"}
76ca635d61eb3f9fb7c9d788a44fa8b1690aa138Dav Glass<h2>Create a `reviver` function</h2>
76ca635d61eb3f9fb7c9d788a44fa8b1690aa138Dav Glass We'll contain all the moving parts in an `example` 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.
76ca635d61eb3f9fb7c9d788a44fa8b1690aa138Dav GlassYUI().use("node", "io", "json-parse",function (Y) {
479b9ac417be02467aadae8cd650d29050001f0bSatyen Desaivar example = {
76ca635d61eb3f9fb7c9d788a44fa8b1690aa138Dav Glass rates : {"USD":1,"EUR":0.6661,...,"COP":2000 ,"ARS":3.1289},
76ca635d61eb3f9fb7c9d788a44fa8b1690aa138Dav Glass currency : 'USD', // updated by the select element
76ca635d61eb3f9fb7c9d788a44fa8b1690aa138Dav Glass convert : function (k,v) {
76ca635d61eb3f9fb7c9d788a44fa8b1690aa138Dav Glass // 'this' will refer to the object containing the key:value pair,
76ca635d61eb3f9fb7c9d788a44fa8b1690aa138Dav Glass // so this step will add a new object member while leaving the original
76ca635d61eb3f9fb7c9d788a44fa8b1690aa138Dav Glass // intact (but formatted to two decimal places). If the original
76ca635d61eb3f9fb7c9d788a44fa8b1690aa138Dav Glass // is not needed, just return the converted value.
76ca635d61eb3f9fb7c9d788a44fa8b1690aa138Dav Glass if (k === 'Price') {
76ca635d61eb3f9fb7c9d788a44fa8b1690aa138Dav Glass var x = Math.round(v * example.rates[example.currency] * 100) / 100;
76ca635d61eb3f9fb7c9d788a44fa8b1690aa138Dav Glass this.convertedPrice = x.toFixed(2); // added to item
76ca635d61eb3f9fb7c9d788a44fa8b1690aa138Dav Glass<h2>Sending the request and parsing the JSON response</h2>
76ca635d61eb3f9fb7c9d788a44fa8b1690aa138Dav Glass When the <em>Get Data</em> button is clicked, we send an io request for the JSON data, and in our `success` handler, pass our conversion function to `JSON.parse()` with the response text. The resulting inventory records will have an additional member, `convertedPrice`. This data is then passed to a UI method to update the inventory table.
76ca635d61eb3f9fb7c9d788a44fa8b1690aa138Dav GlassY.one('#demo_go').on('click', function (e) {
76ca635d61eb3f9fb7c9d788a44fa8b1690aa138Dav Glass // Disable the button temporarily
76ca635d61eb3f9fb7c9d788a44fa8b1690aa138Dav Glass this.set('disabled',true);
76ca635d61eb3f9fb7c9d788a44fa8b1690aa138Dav Glass // Store the requested currency
76ca635d61eb3f9fb7c9d788a44fa8b1690aa138Dav Glass var sel = Y.one("#demo select");
76ca635d61eb3f9fb7c9d788a44fa8b1690aa138Dav Glass example.currency = sel.get("options").item(sel.get("selectedIndex")).get("value");
76ca635d61eb3f9fb7c9d788a44fa8b1690aa138Dav Glass // Send the request for the JSON data
76ca635d61eb3f9fb7c9d788a44fa8b1690aa138Dav Glass Y.io('{{componentAssets}}/json-convert-values-response.json',{
76ca635d61eb3f9fb7c9d788a44fa8b1690aa138Dav Glass timeout : 3000,
76ca635d61eb3f9fb7c9d788a44fa8b1690aa138Dav Glass success : function (xid, res) {
76ca635d61eb3f9fb7c9d788a44fa8b1690aa138Dav Glass var inventory;
76ca635d61eb3f9fb7c9d788a44fa8b1690aa138Dav Glass inventory = Y.JSON.parse(res.responseText,example.convert);
76ca635d61eb3f9fb7c9d788a44fa8b1690aa138Dav Glass alert("Error getting inventory data");
76ca635d61eb3f9fb7c9d788a44fa8b1690aa138Dav Glass Y.one('#demo_go').set('disabled',false);
76ca635d61eb3f9fb7c9d788a44fa8b1690aa138Dav Glass failure : function () {
76ca635d61eb3f9fb7c9d788a44fa8b1690aa138Dav Glass alert("Error getting inventory data");
76ca635d61eb3f9fb7c9d788a44fa8b1690aa138Dav Glass}); // End YUI(..).use(..,function (Y) {
76ca635d61eb3f9fb7c9d788a44fa8b1690aa138Dav Glass<h2>Complete Example Source</h2>
76ca635d61eb3f9fb7c9d788a44fa8b1690aa138Dav Glass{{>json-convert-values-source}}