YUI 3.x Home -

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.

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:

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

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

  1. YUI().use("datasource-local", "datasource-xmlschema", function(Y) {
  2. var myTable = Y.Node.getDOMNode(Y.get("#myTable")),
  3. myDataSource = new Y.DataSource.Local({source:myTable}),
  4. myCallback = {
  5. success: function(e){
  6. alert(e.response);
  7. },
  8. failure: function(e){
  9. alert("Could not retrieve data: " + e.error.message);
  10. }
  11. };
  12.  
  13. myDataSource.plug(Y.Plugin.DataSourceXMLSchema, {
  14. schema: {
  15. resultListLocator: "tr",
  16. resultFields: [
  17. {key:"beverage", locator:"td[1]"},
  18. {key:"price", locator:"td[2]"}
  19. ]
  20. }
  21. });
  22.  
  23. myDataSource.sendRequest(null, myCallback);
  24. });
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