YUI 3.x Home -

Site Search (YDN & YUIBlog):

# YUI Library Examples: DataSource Utility: DataSource.Local

## DataSource Utility: DataSource.Local

Use DataSource.Local to manage retrieval of local data, from JavaScript arrays and objects to DOM elements. 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,extra:"foo"},
        {name:"def",id:456,extra:"bar"},
        {name:"ghi",id:789,extra:"baz"}
    ]

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

#### HTML Table (XML)

###### Data

coffee | 1.25
juice | 2.00
tea | 1.25
soda | 1.00

###### Schema

    {
        resultListLocator: "tr",
        resultFields: [{key:"beverage", locator:"td[1]"}, {key:"price", locator:"td[2]"}]
    }

###### Normalized data

If you are working with local array data, use the DataSourceArraySchema plugin to normalize and filter the data into a consistent format:

    YUI().use("datasource-local", "datasource-arrayschema", function(Y) {    var myData = [            {name:"abc",id:123,extra:"foo"},            {name:"def",id:456,extra:"bar"},            {name:"ghi",id:789,extra:"baz"}        ],        myDataSource = new Y.DataSource.Local({source:myData}),        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);});

    YUI().use("datasource-local", "datasource-arrayschema", function(Y) {
        var myData = [
                {name:"abc",id:123,extra:"foo"},
                {name:"def",id:456,extra:"bar"},
                {name:"ghi",id:789,extra:"baz"}
            ],
            myDataSource = new Y.DataSource.Local({source:myData}),
            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);
    });

YUI().use("datasource-local", "datasource-arrayschema", function(Y) { var myData = [ {name:"abc",id:123,extra:"foo"}, {name:"def",id:456,extra:"bar"}, {name:"ghi",id:789,extra:"baz"} ], myDataSource = new Y.DataSource.Local({source:myData}), 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); });

Use the DataSourceJSONSchema plugin to normalize JSON data:

    YUI().use("datasource-local", "datasource-jsonschema", function(Y) {    var myData = {        "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.Local({source:myData}),    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);});

    YUI().use("datasource-local", "datasource-jsonschema", function(Y) {
        var myData = {
            "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.Local({source:myData}),
        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);
    });

YUI().use("datasource-local", "datasource-jsonschema", function(Y) { var myData = { "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.Local({source:myData}), 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); });

You can use the DataSourceXMLSchema plugin to work with DOM elements:

    YUI().use("datasource-local", "datasource-xmlschema", function(Y) {    var myTable = Y.Node.getDOMNode(Y.get("#myTable")),        myDataSource = new Y.DataSource.Local({source:myTable}),        myCallback = {            success: function(e){                alert(e.response);            },            failure: function(e){                alert("Could not retrieve data: " + e.error.message);            }        };     myDataSource.plug(Y.Plugin.DataSourceXMLSchema, {        schema: {            resultListLocator: "tr",            resultFields: [                {key:"beverage", locator:"td[1]"},                {key:"price", locator:"td[2]"}            ]        }    });     myDataSource.sendRequest(null, myCallback);});

    YUI().use("datasource-local", "datasource-xmlschema", function(Y) {
        var myTable = Y.Node.getDOMNode(Y.get("#myTable")),
            myDataSource = new Y.DataSource.Local({source:myTable}),
            myCallback = {
                success: function(e){
                    alert(e.response);
                },
                failure: function(e){
                    alert("Could not retrieve data: " + e.error.message);
                }
            };

        myDataSource.plug(Y.Plugin.DataSourceXMLSchema, {
            schema: {
                resultListLocator: "tr",
                resultFields: [
                    {key:"beverage", locator:"td[1]"},
                    {key:"price", locator:"td[2]"}
                ]
            }
        });

        myDataSource.sendRequest(null, myCallback);
    });

YUI().use("datasource-local", "datasource-xmlschema", function(Y) { var myTable = Y.Node.getDOMNode(Y.get("#myTable")), myDataSource = new Y.DataSource.Local({source:myTable}), myCallback = { success: function(e){ alert(e.response); }, failure: function(e){ alert("Could not retrieve data: " + e.error.message); } }; myDataSource.plug(Y.Plugin.DataSourceXMLSchema, { schema: { resultListLocator: "tr", resultFields: [ {key:"beverage", locator:"td[1]"}, {key:"price", locator:"td[2]"} ] } }); myDataSource.sendRequest(null, myCallback); });

Copyright © 2009 Yahoo! Inc. All rights reserved.

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