![Close [x]](http://dw1.s81c.com/i/c.gif){kind=small}
Displaying a list of contacts
In this section, we will create and display a list of contacts.
To construct a list of contacts, you first need to create a view. This is a JavaScript function that accepts a document as the only argument. The function is executed by Apache CouchDB on every document in the database, and it should output keys (which are used for displaying and filtering information) and corresponding values that you want to output for each document in this view. This process is called the map, as you are mapping the document contents to the information that you want to extract. There is another step, called reduce, which can be used to summarize or simplify the information, but we will not need that for a contacts application.
For example, to output the name from the contact document as the key, and the entire contact record as the value, you would need to write the view shown in Listing 7.
Listing 7. Writing the view
function(doc) {
if (doc.name) {
emit(doc.name,doc);
}
}
|
The anonymous function accepts a single argument, the document. The
function then checks to ensure the record has a field called name, and
if true, the emit() function then returns
two values: The first is the key, and the second is the value, in this
case, a copy of the document. Both keys and values can be any valid
JSON structure. Keys are used by Apache CouchDB during searching and
paging. The values merely contain the information that you want to
expose in this view when it is accessed.
Within CouchApp, you can create a new view on the command line using
the generate command:
$ couchapp generate view contacts byname.
This creates the view byname, in the
directory contacts/views/byname, and creates two files, map.js and
reduce.js. Edit the map.js file and change it to the function in
Listing 6.
You can now push the application to your Apache CouchDB database again.
Views are accessible through the browser interface. You can access the
view byname on the contacts design document
by accessing the URL
http://127.0.0.1:5984/contacts/_design/contacts/_view/byname.
Again, we are using the design document contact, this time requesting
the output of a view (identified by the
_view) in the path, with the view name of
byname.
At this stage, the view will be empty:
{"total_rows":0,"offset":0,"rows":[]}.
Displaying the view within the application
To display the view within our application, we can use the jQuery Couch library to access the view, iterate over each record returned by the view, and then print the record information.
A function for this is shown in Listing 8.
Listing 8. Displaying the view within our application
db = $.couch.db("contacts");
function updatecontacts() {
$("#contacts").empty();
db.view("contacts/byname", {success: function(data) {
for (i in data.rows) {
$("#contacts").append('<div id="' + data.rows[i].value._id
+ '" class="contactrow"><span>' +
data.rows[i].value.name +
"</span><span>" +
data.rows[i].value.phone +
"</span><span>" +
'<a href="#" id="' + data.rows[i].value._id
+ '" class="edit">Edit Contact</a>' +
"</span><span>" +
'<a href="#" id="' + data.rows[i].value._id
+ '" class="remove">Remove Contact</a>' +
"</span></div>"
);
}
}
});
}
|
The first line in Listing 7 sets a variable used
to access the database. The
updatecontacts() function first empties the
div element that will be used to display the contacts list, then it
accesses the results of the view that was just created. If the view
access was successful, an anonymous function is called with the
returned view data as a JSON structure. The function then iterates
over the content, and builds a contact row that outputs the contact
name and phone number.
The view results is represented as an array (rows), with each element
of the array being a JSON structure containing the contents of the key
returned by the view, and the value returned by the view. Hence, we
can access the phone number of a contact record returned by the view
by accessing the value.field portion of the
array element.
The output produces an Edit Contact and a Remove Contact link, which also includes the ID of the underlying Apache CouchDB document. This will be used to provide the information when updating and deleting a contact.
To add this function to the contacts application, create a new file, contacts/_attachments/recordedit.js, and add the function to the file.
The second step is to ensure that the document is loaded, and the
updatecontacts() function is called to
display the current contact list. jQuery makes this easy by providing
a ready() function on the document.
Everything within the function you assign to this operation will be
executed when the document has finished loading. You can see the
definition in Listing 9.
Listing 9.
ready() function
$(document).ready(function() {
updatecontacts();
}
|
Push the application again, and reload the index page. There shouldn't be any changes to what is displayed, but it is good practice to ensure that the application has not been broken when adding in new components.
Of course, the list will still be empty, so let's create a form that can be used to view some contacts.
Table of contents
Next steps from IBM
Create rich Internet applications using WebSphere Portal Express Web 2.0 technologies.
- Try: WebSphere Portal Express
- Article: Get started using Ajax and WebSphere Portal Express
- Tutorial: Quickly build a an Ajax-enabled WebSphere Portal Express Web application
- Demo: Architecture, design, and construction using the IBM Rational Software Delivery Platform: AJAX
- Buy: WebSphere Portal Express
