YUI 3.x Home -

YUI Library Examples: DataSource Utility: DataSource.Function

DataSource Utility: DataSource.Function

DataSource.Function allows the implementer to define a JavaScript function that returns data values, for maximum customizeability. A DataSchema plugin is used to normalize incoming data into a known format for consistency of usage by other components.

View example in new window.

Array

Data
[
    {name:"abc",id:123},
    {name:"def",id:456},
    {name:"ghi",id:789}
]
Schema
{
    resultFields: ["name","id"]
}
Normalized data

JSON

Data
{
    "profile":{
        "current":160,
        "target":150
    },
    "reference": [
        {
            "category":"exercise",
            "type":"expenditure",
            "activities":[
                {"name":"biking", "calories":550},
                {"name":"golf", "calories":1000},
                {"name":"running", "calories":650},
                {"name":"swimming", "calories":650},
                {"name":"walking", "calories":225}
            ]
        },
        {
            "category":"nutrition",
            "type":"intake",
            "fruit":[
                {"name":"apple", "calories":70},
                {"name":"banana", "calories":70},
                {"name":"orange", "calories":90},
            ],
            "vegetables":[
                {"name":"baked potato", "calories":150},
                {"name":"broccoli", "calories":50},
                {"name":"green beans", "calories":30}
            ]
        }
    ],
    "program": [
        {
            "category":"exercise",
            "schedule":[
                {"day":"sunday", "activity":"swimming"},
                {"day":"monday", "activity":"running"},
                {"day":"tuesday", "activity":"biking"},
                {"day":"wednesday", "activity":"running"},
                {"day":"thursday", "activity":"swimming"},
                {"day":"friday", "activity":"running"},
                {"day":"saturday", "activity":"golf"}
            ]
        },
        {
            "category":"diet",
            "schedule":[
            ]
        }
    ]
}
Schema
{
    resultListLocator: "reference[1].fruit",
    resultFields: ["name","calories"]
}
Normalized data

Your custom function can return arbitrary data, so use the appropriate schema plugin to normalize the data into a consistent format. Array data would use a DataSourceArraySchema plugin:

  1. YUI().use("datasource-function", "datasource-arrayschema", function(Y) {
  2.     var myFunction = function(request) {
  3.         return [
  4.             {name:"abc",id:123},
  5.             {name:"def",id:456},
  6.             {name:"ghi",id:789}
  7.         ];
  8.     },
  9.     myDataSource = new Y.DataSource.Function({source:myFunction}),
  10.     myCallback = {
  11.         success: function(e){
  12.             alert(e.response);
  13.         },
  14.         failure: function(e){
  15.             alert("Could not retrieve data: " + e.error.message);
  16.         }
  17.     };
  18.  
  19.     myDataSource.plug(Y.Plugin.DataSourceArraySchema, {
  20.         schema: {
  21.             resultFields: ["name","id"]
  22.         }
  23.     });
  24.  
  25.     myDataSource.sendRequest(null, myCallback);
  26. });
YUI().use("datasource-function", "datasource-arrayschema", function(Y) {
    var myFunction = function(request) {
        return [
            {name:"abc",id:123},
            {name:"def",id:456},
            {name:"ghi",id:789}
        ];
    },
    myDataSource = new Y.DataSource.Function({source:myFunction}),
    myCallback = {
        success: function(e){
            alert(e.response);
        },
        failure: function(e){
            alert("Could not retrieve data: " + e.error.message);
        }
    };
 
    myDataSource.plug(Y.Plugin.DataSourceArraySchema, {
        schema: {
            resultFields: ["name","id"]
        }
    });
 
    myDataSource.sendRequest(null, myCallback);
});

Whereas JSON data would use a DataSourceJSONSchema plugin:

  1. YUI().use("datasource-function", "datasource-jsonschema", function(Y) {
  2.     var myFunction = function(request) {
  3.         return {
  4.             "profile":{
  5.                 "current":160,
  6.                 "target":150
  7.             },
  8.             "reference": [
  9.                 {
  10.                     ...
  11.                 },
  12.                 {
  13.                     "category":"nutrition",
  14.                     "type":"intake",
  15.                     "fruit":[
  16.                         {"name":"apple", "calories":70},
  17.                         {"name":"banana", "calories":70},
  18.                         {"name":"orange", "calories":90},
  19.                     ],
  20.                     "vegetables":[
  21.                         {"name":"baked potato", "calories":150},
  22.                         {"name":"broccoli", "calories":50},
  23.                         {"name":"green beans", "calories":30}
  24.                     ]
  25.                 }
  26.             ],
  27.             "program": [
  28.                 ...
  29.             ]
  30.         };
  31.     },
  32.     myDataSource = new Y.DataSource.Function({source:myFunction}),
  33.     myCallback = {
  34.         success: function(e){
  35.             alert(e.response);
  36.         },
  37.         failure: function(e){
  38.             alert("Could not retrieve data: " + e.error.message);
  39.         }
  40.     };
  41.  
  42.     myDataSource.plug(Y.Plugin.DataSourceJSONSchema, {
  43.         schema: {
  44.             resultListLocator: "reference[1].fruit",
  45.             resultFields: ["name","calories"]
  46.         }
  47.     });
  48.  
  49.     myDataSource.sendRequest(null, myCallback);
  50. });
YUI().use("datasource-function", "datasource-jsonschema", function(Y) {
    var myFunction = function(request) {
        return {
            "profile":{
                "current":160,
                "target":150
            },
            "reference": [
                {
                    ...
                },
                {
                    "category":"nutrition",
                    "type":"intake",
                    "fruit":[
                        {"name":"apple", "calories":70},
                        {"name":"banana", "calories":70},
                        {"name":"orange", "calories":90},
                    ],
                    "vegetables":[
                        {"name":"baked potato", "calories":150},
                        {"name":"broccoli", "calories":50},
                        {"name":"green beans", "calories":30}
                    ]
                }
            ],
            "program": [
                ...
            ]
        };
    },
    myDataSource = new Y.DataSource.Function({source:myFunction}),
    myCallback = {
        success: function(e){
            alert(e.response);
        },
        failure: function(e){
            alert("Could not retrieve data: " + e.error.message);
        }
    };
 
    myDataSource.plug(Y.Plugin.DataSourceJSONSchema, {
        schema: {
            resultListLocator: "reference[1].fruit",
            resultFields: ["name","calories"]
        }
    });
 
    myDataSource.sendRequest(null, myCallback);
});

More DataSource Utility Resources:

Copyright © 2009 Yahoo! Inc. All rights reserved.

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