YUI 3.x Home -

Site Search (YDN & YUIBlog):

# YUI Library Examples: DataSource Utility: DataSource.Function

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

## 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:

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({fn: Y.Plugin.DataSourceArraySchema, cfg: { schema: { resultFields: ["name","id"] } }}); myDataSource.sendRequest(null, myCallback); });

Whereas JSON data would use a DataSourceJSONSchema plugin:

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({fn: Y.Plugin.DataSourceJSONSchema, cfg: { schema: { resultListLocator: "reference[1].fruit", resultFields: ["name","calories"] } }}); myDataSource.sendRequest(null, myCallback); });

Copyright © 2009 Yahoo! Inc. All rights reserved.

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