Welcome, guest ( Login )

WikiHome » dojo.data » DojoDataReadExamples

DojoDataReadExamples

Version 21, changed by brian 03/15/2007.   Show version history

Here are some examples of different ways that you can use the dojo.data Read API.
For background and context, see

...


1) A simple example, reading from a CSV file (comma-separated values). A no-arg find() means "find all items".

 1 |  var store = new dojo.data.CsvStore({url:"movies.csv"});
 2 |  var result = store.find();
 3 |  result.fetch({onComplete:myCallback saveResult:true});
----
11 |  function myCallback(result) {
12 |      var array = result.items;
13 |      for (var i = 0; i < array.length; ++i) {
14 |          var item = array[i];
15 |          // ... display the item ...
16 |      }
17 |  }

1.1) Or, using an inline function for the callback...

 1 |  var store = new dojo.data.CsvStore({url:"movies.csv"});
 2 |  store.find().fetch({
 3 |      saveResult: true,
 4 |      onComplete: function (result){
 5 |          var array = result.items;
 6 |          for (var i = 0; i < array.length; ++i) {
 7 |              var item = array[i];
 8 |              // ... display the item ...
 9 |          }
10 |      }
11 |  });

To read data from a simple CSV file like this one:

Title, Year, Producer
Alien, 1979, Ridley Scott
City of God, 2002, Katia Lund
Rain, 2001, Christine Jeffs

2) A simple example, reading from an HTML table in a web page

Just like the CSV example above...

 1 |  var store = new dojo.data.HtmlTableStore({url:"#movies"});
 2 |  var result = store.find();
 3 |  result.fetch({onComplete:myCallback saveResult:true});
----
11 |  function myCallback(result) {
12 |      var array = result.items;
13 |      for (var i = 0; i < array.length; ++i) {
14 |          var item = array[i];
15 |          // ... display the item ...
16 |      }
17 |  }

To read data from a simple HTML table like this:

<table id="movies">
    <tr> <th>Title</th> <th>Year</th> <th>Producer</th> </tr>
    <tr> <td>Alien</td> <td>1979</td> <td>Ridley Scott</td> </tr>
    <tr> <td>City of God</td> <td>2002</td> <td>Katia Lund</td> </tr>
    <tr> <td>Rain</td> <td>2001</td> <td>Christine Jeffs</td> </tr>
</table>

2.1) A proposed variant, with two simplifications

One simplification is to get rid of the find() call, and let the user just fetch the content immediately. The second simplification is to get rid of the saveResults:true argument, and instead automatically pass an array of the result items to the onComplete callback whenever there is not an onItem callback.

(This option 2.1 is the same as the thing we describe on the DojoDataFindAndFetch page as option 5.)

 1 |  var store = new dojo.data.HtmlTableStore({url:"#movies"});
 2 |  store.fetch({onComplete:myCallback});
----
11 |  function myCallback(array) {
12 |      for (var i = 0; i < array.length; ++i) {
13 |          var item = array[i];
14 |          // ... display the item ...
15 |      }
16 |  }

2.1.1) The proposed variant, via inline function callback

 1 |  var store = new dojo.data.HtmlTableStore({url:"#movies"});
 2 |  store.fetch({
 3 |      onComplete: function (array){
 4 |          for (var i = 0; i < array.length; ++i) {
 5 |              var item = array[i];
 6 |              // ... display the item ...
 7 |          }
 8 |      }
 9 |  });

2.1.2) Or, via inline onItem callback

 1 |  var store = new dojo.data.HtmlTableStore({url:"#movies"});
 2 |  store.fetch({
 3 |      onItem: function (item){
 4 |          // ... display the item ...
 5 |      }
 6 |  });

3) A simple case, reading from an HTML table, this time with more callbacks

 1 |  var store = new dojo.data.HtmlTableStore({url:"#movies"});
 2 |  var result = store.find({onError: errorCallbackForFind});
 3 |  result.fetch({
 4 |      scope: displayer,  // an object that implements the callbacks
 5 |      onError: errorCallback,
 6 |      onBegin: beginCallback,
 7 |      onItem: itemCallback,
 8 |      onComplete: completeCallback,
 9 |  });
----
11 |  displayer.itemCallback = function(item) {
12 |      // ... display the item ...
13 |  }


4) Reading from a streaming datastore, like an IRC chat session

Each item is a line of text from the IRC chat. Each item has just a few attributes, like "timestamp", "author", and "body". Here are a few example items:

[14:56]	<slightlyoff>	ccmitchell: but async solves an important request/response problem
[14:56]	<ccmitchell>	but i think just sticking with the asynch case is the only common solution
[14:56]	<slightlyoff>	(namely that of network latency)
 1 |  var store = new dojo.data.IrcStore({url:"irc://freenode"});
 2 |  var result = store.find({query:{channel:"dojo-meeting"}});
 3 |  result.fetch({onItem:myCallback});
----
11 |  function myCallback(item) {
12 |      // ... display the item ...
13 |  }



5) Paging through a large dataset from a data source like a big custom enterprise RDBMS

 1 |  var store = new dojo.data.LargeRdbmsStore({url:"jdbc:odbc:foobar"});
 2 |  var result = store.find({query:{type:"employees"}});
 3 |  result.fetch({start:0, count:20, onItem:displayItem}); // get 20 items
...|    ...
 N |  result.fetch({start:20, count:20, onItem:displayItem}); // get more items
----
11 |  function displayItem(item) {
15 |      // ... display the item ...
17 |  }

5.1) A longer paging example, which also shows sorting, string matching, error handling, etc.

 1 |  var store = new dojo.data.LargeRdbmsStore({url:"jdbc:odbc:foobar"});
 2 |  var result = store.find({
 3 |      query: {type:"employees", name:"Hillary *"}, // string matching
 4 |      sort: [{attribute:"department", descending:true}],
 5 |      onError: handleFindError
 6 |  });
 7 |  var fetchArgs = {
 8 |      start: 0, count: 20,  // get the first 20 items
 9 |      scope: displayer,
10 |      onBegin: showThrobber,
11 |      onItem: displayItem,
12 |      onComplete: stopThrobber,
13 |      onError: handleFetchError
14 |  };
15 |  result.fetch(fetchArgs);
...|    ...
40 |  // and then when the user presses the "Next Page" button...
41 |  fetchArgs.start += 20;
42 |  result.fetch(fetchArgs);  // get the next 20 items
----
80 |  displayer.onItem = function(item) {
81 |      // ... display the item ...
82 |  }

Attachments (0)

  File By Size Attached Ver.