Querying a jsonengine Instance

You’ve already seen how easy it is to insert data using the REST API. Likewise, making a query will also be done through the REST API, using the HTTP GET method. First, we have to create a new HTML page—let’s call it todolist-readonly.html.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> <title>Tasks page</title> <link rel="stylesheet" media="screen" href="todolist-readonly.css" /> <script type="text/javascript" src="../../js/jquery-1.4.2.min.js"></script> <script type="text/javascript"> // get all the posts and show them $(function() {

$.get("/_je/tasks", { sort: "_createdAt.desc" }, function (result) { var rowsHtml = '';

for (var ii = 0; ii < result.length; ii++) { rowsHtml += '<tr>' + '<td>' + result[ii].name + '</td>' + '<td>' + result[ii].description + '</td>' + '<td>' + result[ii].due + '</td>' +

'</tr>'; } // for

$('#taskTable tbody').html(rowsHtml); }); }); </script> </head> <body> <h1>Current tasks stored in jsonengine</h1> <table id="taskTable">

<thead> <tr> <th>Name</th> <th>Description</th> <th>Due</th>

</tr> </thead> <tbody />

</table> </body> </html>

CHAPTER 5: Synchronizing with the Cloud

The interesting part here is the JavaScript function that is called when the page is loaded. We are using jQuery’s get function—the syntax is almost the same as the post function, but we are now passing sorting parameters. The result is an array of JSON documents. A JSON document is a JSON string representation of a Task instance. We just have to iterate through the array and update a HTML table to add a new row.

In this particular instance, we are first collecting all the new rows in a string and then replacing the body of the table ( tbody) using a single call using the jQuery html function. While we could just as easily have appended each row as we found it, we increase the speed of our application by trying to do updates to the HTML as few times as possible. While it’s not something that you would notice in a small page like this, it is a good habit to get into.

With the HTML page complete, we will also add some very basic styling to the todolist-readonly.css stylesheet:

table, td { border: 1px solid #666666; width: 100%;

td { width:33%; padding: 2px;

} Then navigate to your freshly made page, and you should see something like Figure 5–3.

Figure 5–3. The desktop application showing the synchronized tasks

CHAPTER 5: Synchronizing with the Cloud

As you can see, all the data inside the offline database is now available online—at least on the server, that is; we haven’t yet uploaded our application to the cloud. Before doing that, we have to add some security to the storage solution; if we leave it as it is, everybody will have access to the desktop web page. Fortunately, jsonengine comes with a security admin page where you can set the access level for your storage documents, as shown in Figure 5–4.

Download from Wow! eBook <www.wowebook.com>

Figure 5–4. The jsonengine security admin page Here, we can add our JSON “tasks” document and set the read level to “protected,” so

that users will only be able to view the data if they are connected with their Google or OpenID accounts.

Querying a jsonengine Instance