YUI 3.x Home -

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.

  1. // Create business logic in a YUI sandbox using the 'io' and 'json' modules
  2. YUI({base:"../../build/", timeout: 10000}).use("node", "io", "dump", "json-parse",function (Y) {
  3.  
  4.     // capture the node that we'll display the messages in
  5.     var target = Y.Node.get('#demo_msg');
  6.  
  7.     // Create the io callback/configuration
  8.     var callback = {
  9.  
  10.         timeout : 3000,
  11.  
  12.         on : {
  13.             success : function (x,o) {
  14.                 Y.log("RAW JSON DATA: " + o.responseText);
  15.  
  16.                 var messages = [],
  17.                     html = '', i, l;
  18.  
  19.                 // Process the JSON data returned from the server
  20.                 try {
  21.                     messages = Y.JSON.parse(o.responseText);
  22.                 }
  23.                 catch (e) {
  24.                     alert("JSON Parse failed!");
  25.                     return;
  26.                 }
  27.  
  28.                 Y.log("PARSED DATA: " + Y.Lang.dump(messages));
  29.  
  30.                 // The returned data was parsed into an array of objects.
  31.                 // Add a P element for each received message
  32.                 for (i=0, l=messages.length; i < l; ++i) {
  33.                     html += '<p>' + messages[i].animal + ' says &quot;' +
  34.                                     messages[i].message + '&quot;</p>';
  35.                 }
  36.  
  37.                 // Use the Node API to apply the new innerHTML to the target
  38.                 target.set('innerHTML',html);
  39.             },
  40.  
  41.             failure : function (x,o) {
  42.                 alert("Async call failed!");
  43.             }
  44.  
  45.         }
  46.     }
  47.  
  48.     // Attach a click event listener to the button #demo_btn to send the request
  49.     Y.on('click',function (e) {
  50.         // Make the call to the server for JSON data
  51.         transaction = Y.io("assets/jsonConnect.php", callback);
  52.     },'#demo_btn');
  53.  
  54. });
// 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 &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');
 
});

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:

  1. [
  2.     { "animal" : "Cat",  "message" : "Meow"  },
  3.     { "animal" : "Dog",  "message" : "Woof"  },
  4.     { "animal" : "Cow",  "message" : "Moo"   },
  5.     { "animal" : "Duck", "message" : "Quack" },
  6.     { "animal" : "Lion", "message" : "Roar"  }
  7. ]
[
    { "animal" : "Cat",  "message" : "Meow"  },
    { "animal" : "Dog",  "message" : "Woof"  },
    { "animal" : "Cow",  "message" : "Moo"   },
    { "animal" : "Duck", "message" : "Quack" },
    { "animal" : "Lion", "message" : "Roar"  }
]

More JSON Resources:

Copyright © 2009 Yahoo! Inc. All rights reserved.

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