YUI Library JavaScript DHTML



    
Adding new object members during parsing

/*margin and padding on body element
  can introduce errors in determining
  element position and are not recommended;
  we turn them off as a foundation for YUI
  CSS treatments. */
body {
  margin:0;
  padding:0;
}







#demo table {
    border: 3px solid #89d;
    border-collapse: collapse;
}
#demo caption {
    margin: 3px 0;
    font-weight: bold;
    color: #333;
    margin: 1em 0 1ex;
}
#demo table th {
    background: #89d;
    color: #fff;
    padding: 1ex 1em;
}
#demo table td {
    background: #fff;
    border: 1px solid #ddd;
    padding: .5ex 1ex;
}




Adding new object members during parsing



  

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.


      



    

Choose a currency, then get the data


    
        Argentine Peso
        Australian Dollar
        Brazilian Real
        British Pound
        Canadian Dollar
        Chinese Yuan
        Colombian Peso
        Croatian Kuna
        Czech Koruna
        Danish Krone
        Estonian Kroon
        Euro
        Hong Kong Dollar
        Hungarian Forint
        Iceland Krona
        Indian Rupee
        Japanese Yen
        Korean Won
        Latvian Lat
        Lithuanian Lita
        Malaysian Ringgit
        Mexican Peso
        New Zealand Dollar
        Norwegian Krone
        Philippine Peso
        Polish Zloty
        Russian Rouble
        Singapore Dollar
        Slovak Koruna
        South African Rand
        Sri Lanka Rupee
        Swedish Krona
        Turkey Lira
        U.S. Dollar
        Swiss Franc
        Taiwan Dollar
        Thai Baht
    
    
    
    Inventory
    
        
            SKU
            Item
            Price (USD)
            Price (USD)
        
    
    
        Click Get Data
    
    


YAHOO.util.Event.onDOMReady(function () {
// Set up some shortcuts
var JSON  = YAHOO.lang.JSON,
    Dom   = YAHOO.util.Dom,
    Event = YAHOO.util.Event,
    Demo;
Demo = YAHOO.namespace('demo').JSONReviver = {
    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',
    formatCurrency : function (amt) {
        amt += amt % 1 ? "0" : ".00";
        return amt.substr(0,amt.indexOf('.')+3);
    },
    convert : function (k,v) {
        // 'this' will refer to the object containing the key:value pair,
        // so this will add a new object member while leaving the original
        // in tact (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 * Demo.rates[Demo.currency] * 100) / 100;
            this.convertedPrice = Demo.formatCurrency(x); // added to item
            return Demo.formatCurrency(v); // assigned to item.Price
        }
        return v;
    },
    updateTable : function (inventory) {
        var demo       = Dom.get('demo'),
            tbl        = demo.getElementsByTagName('table')[0],
            tbody      = tbl.getElementsByTagName('tbody')[0],
            col_header = tbl.getElementsByTagName('span')[0],
            tmp        = document.createElement('div'),
            html       = [""],i,j = 1,l,item;
        // Update the column header
        col_header.innerHTML = Demo.currency;
        if (inventory) {
            for (i = 0, l = inventory.length; i < l; ++i) {
                item = inventory[i];
                html[j++] = '';
            }
        } else {
            html[j++] = 'No Inventory data';
        }
        html[j] = "
';
                html[j++] = item.SKU;
                html[j++] = '
';
                html[j++] = item.Item;
                html[j++] = '
';
                html[j++] = item.Price;
                html[j++] = '
';
                html[j++] = item.convertedPrice;
                html[j++] = '
";
        tmp.innerHTML = html.join('');
        tbl.replaceChild(tmp.getElementsByTagName('tbody')[0], tbody);
    }
};
Event.on('demo_go','click', function (e) {
    var self = this,     // Cache this for the async callback closure
        sel  = Dom.get('currencies'); // Store the requested currency
    // Disable the button temporarily
    this.disabled = true;
    // Store the requested currency
    Demo.currency = sel.value;
    YAHOO.util.Connect.asyncRequest('GET','yui_2.7.0b-assets/json-assets/data.php',{
        timeout : 3000,
        success : function (res) {
            var inventory;
            try {
                inventory = JSON.parse(res.responseText,Demo.convert);
                Demo.updateTable(inventory);
            }
            catch(e) {
                alert("Error getting inventory data");
            }
            finally {
                self.disabled = false;
            }
        },
        failure : function () {
            alert("Error getting inventory data");
        }
    });
});
});




   
  
yui_2.7.0b.zip( 4,431 k)