Example: JSON with Y.io

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.

Y.io('../assets/json/json-connect-response.json', {
    on : {
        success : function (tx, r) {
            var parsedResponse;

            // protected against malformed JSON response
            try {
               parsedResponse = Y.JSON.parse(r.responseText);
            }
            catch (e) {
                alert("JSON Parse failed!");
                return;
            }
        }
    }
});

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"  }
]

In the success handler we'll simply loop through this array and outputting its contents to the DOM.

Complete Example Source

<div id="demo" class="yui3-skin-sam">
    <p>Click the <em>Get Messages</em> button to send the request to the server; the response will be displayed below the button.</p>
    <p><button>Get Messages</button></p>
    <div id="demo-messages"></div>
</div>

<script>
// 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.one('#demo-messages');

    // 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.setHTML(html);
            },

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

        }
    };

    // Attach a click event listener to the button #demo_btn to send the request
    Y.one('#demo button').on('click',function (e) {
        // Make the call to the server for JSON data
        Y.io("../assets/json/json-connect-response.json", callback);
    });

});
</script>