YUI 3.x Home -

Site Search (YDN & YUIBlog):

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

Note: This is YUI 3.x. Looking for YUI 2.x?

## 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' modules YUI({base:"../../build/", timeout: 10000}).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" } ]

Copyright © 2009 Yahoo! Inc. All rights reserved.

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