YUI 3.x Home -

Site Search (YDN & YUIBlog):

# YUI Library Examples: JSON: JSON with Y.io

## JSON: JSON with Y.io

A natural fit for JSON is working with the io module. In this example, we'll request JSON data from the server using the `Y.io` method and parse the resulting JSON string data for processing.

Click the Get Messages button to send the request to the server.

View example in new window.

### Use `Y.JSON.parse` in the success handler

Pass the XHR `responseText` to `Y.JSON.parse` and capture the return value. Note that the parse method can throw a `SyntaxError` exception, so be sure to wrap the call in a `try/catch` block.

    // Create business logic in a YUI sandbox using the 'io' and 'json' modulesYUI().use("node", "io", "dump", "json-parse",function (Y) {     // capture the node that we'll display the messages in    var target = Y.Node.get('#demo_msg');     // Create the io callback/configuration    var callback = {         timeout : 3000,         on : {            success : function (x,o) {                Y.log("RAW JSON DATA: " + o.responseText);                 var messages = [],                    html = '', i, l;                 // Process the JSON data returned from the server                try {                    messages = Y.JSON.parse(o.responseText);                }                catch (e) {                    alert("JSON Parse failed!");                    return;                }                 Y.log("PARSED DATA: " + Y.Lang.dump(messages));                 // The returned data was parsed into an array of objects.                // Add a P element for each received message                for (i=0, l=messages.length; i < l; ++i) {                    html += '<p>' + messages[i].animal + ' says &quot;' +                                    messages[i].message + '&quot;</p>';                }                 // Use the Node API to apply the new innerHTML to the target                target.set('innerHTML',html);            },             failure : function (x,o) {                alert("Async call failed!");            }         }    }     // Attach a click event listener to the button #demo_btn to send the request    Y.on('click',function (e) {        // Make the call to the server for JSON data        transaction = Y.io("assets/jsonConnect.php", callback);    },'#demo_btn'); });

    // Create business logic in a YUI sandbox using the 'io' and 'json' modules
    YUI().use("node", "io", "dump", "json-parse",function (Y) {

        // capture the node that we'll display the messages in
        var target = Y.Node.get('#demo_msg');

        // Create the io callback/configuration
        var callback = {

            timeout : 3000,

            on : {
                success : function (x,o) {
                    Y.log("RAW JSON DATA: " + o.responseText);

                    var messages = [],
                        html = '', i, l;

                    // Process the JSON data returned from the server
                    try {
                        messages = Y.JSON.parse(o.responseText);
                    }
                    catch (e) {
                        alert("JSON Parse failed!");
                        return;
                    }

                    Y.log("PARSED DATA: " + Y.Lang.dump(messages));

                    // The returned data was parsed into an array of objects.
                    // Add a P element for each received message
                    for (i=0, l=messages.length; i < l; ++i) {
                        html += '<p>' + messages[i].animal + ' says &quot;' +
                                        messages[i].message + '&quot;</p>';
                    }

                    // Use the Node API to apply the new innerHTML to the target
                    target.set('innerHTML',html);
                },

                failure : function (x,o) {
                    alert("Async call failed!");
                }

            }
        }

        // Attach a click event listener to the button #demo_btn to send the request
        Y.on('click',function (e) {
            // Make the call to the server for JSON data
            transaction = Y.io("assets/jsonConnect.php", callback);
        },'#demo_btn');

    });

// Create business logic in a YUI sandbox using the 'io' and 'json' modules YUI().use("node", "io", "dump", "json-parse",function (Y) { // capture the node that we'll display the messages in var target = Y.Node.get('#demo_msg'); // Create the io callback/configuration var callback = { timeout : 3000, on : { success : function (x,o) { Y.log("RAW JSON DATA: " + o.responseText); var messages = [], html = '', i, l; // Process the JSON data returned from the server try { messages = Y.JSON.parse(o.responseText); } catch (e) { alert("JSON Parse failed!"); return; } Y.log("PARSED DATA: " + Y.Lang.dump(messages)); // The returned data was parsed into an array of objects. // Add a P element for each received message for (i=0, l=messages.length; i < l; ++i) { html += '<p>' + messages[i].animal + ' says "' + messages[i].message + '"</p>'; } // Use the Node API to apply the new innerHTML to the target target.set('innerHTML',html); }, failure : function (x,o) { alert("Async call failed!"); } } } // Attach a click event listener to the button #demo_btn to send the request Y.on('click',function (e) { // Make the call to the server for JSON data transaction = Y.io("assets/jsonConnect.php", callback); },'#demo_btn'); });

The `parse` method returns the native JavaScript object representation of the string data returned from the `Y.io` call. In this case, the data is an array of object literals in this form:

    [    { "animal" : "Cat",  "message" : "Meow"  },    { "animal" : "Dog",  "message" : "Woof"  },    { "animal" : "Cow",  "message" : "Moo"   },    { "animal" : "Duck", "message" : "Quack" },    { "animal" : "Lion", "message" : "Roar"  }]

    [
        { "animal" : "Cat",  "message" : "Meow"  },
        { "animal" : "Dog",  "message" : "Woof"  },
        { "animal" : "Cow",  "message" : "Moo"   },
        { "animal" : "Duck", "message" : "Quack" },
        { "animal" : "Lion", "message" : "Roar"  }
    ]

[ { "animal" : "Cat", "message" : "Meow" }, { "animal" : "Dog", "message" : "Woof" }, { "animal" : "Cow", "message" : "Moo" }, { "animal" : "Duck", "message" : "Quack" }, { "animal" : "Lion", "message" : "Roar" } ]

Copyright © 2010 Yahoo! Inc. All rights reserved.

Privacy Policy - Terms of Service - Copyright Policy - Job Openings