Connecting dbBee JDE with host page using jQuery

Tweet

Remember, in previous article we mentioned that upon deploying JDE, the embed code page displays nothing but a link code and data preview.

In this article we’ll give you basic instructions on how to connect JDE with your host page.

For this example we will need the jQuery library, so make sure that you have included it somewhere in your page. If you do not have it included, use the following code to include it:

<script src="https://code.jquery.com/jquery-1.12.2.min.js"></script>

In this example, we will use JDE to display books in our library. JSON returned by our JDE looks like this (we will show only two records here, to save the space):

{
    "BooksCount": "28",
    "Books": [{
        "Author": "Olav Martin Kvern",
        "Title": "Real World FreeHand 5.0\/5.5",
        "Year Published": "1996",
        "ISBN": "0201883600",
        "Publisher": "Addison-Wesley Pub Co",
        "Image": "<img src=\"http:\/\/www.small-applications.com\/biblioimg\/0201883600.jpg\" border=\"0\">"
    }, {
        "Author": "Andrew Troelsen",
        "Title": "C# and the .NET Platform",
        "Year Published": "2001",
        "ISBN": "1893115593",
        "Publisher": "Apress",
        "Image": "<img src=\"http:\/\/www.small-applications.com\/biblioimg\/1893115593.jpg\" border=\"0\">"
    }]
}

You’ll notice that it contains the key BooksCount and data array Books. These are the names we defined in JDE wizard, when we created the project. BooksCount key contains the total number of records in the recordset (in this case 28 records). The Books array contains the values of the database fields Author, Title, Year Published, ISBN, Publisher and Image. One array element is created for every record (in our case it means that our array will have 28 elements).

Now, to get this JSON and to connect it with our page we need a div where we will display the fetched data and some jQuery:

<script>
$.getJSON('https://thyme.dbbee.com/u/SGCEQ5WZFZ/BooksJSONjsonapi.wbsp', function (data) {
    var tHTML="The search returned " + data.BooksCount + " records<br/>";
    for(var i in data.Books){
    tHTML += data.Books[i].Image+"<h1>" +
    data.Books[i].Title +
    "</h1><h2>" +
    data.Books[i].Author +
    "</h2><h2>" + 
    data.Books[i].Publisher +
    "</h2><h3>" +
    data.Books[i]['Year Published'] +
    "</h3><hr>";
    }
    document.getElementById("demo").innerHTML = tHTML;
  });
</script>
<div id="demo"></div>

Let’s analyze this code. It is basically single jQuery getJSON function with two parameters – the URL of JSON document (in this case URL of our JDE project) and a function to process loaded JSON document.

So once the host page is ready, jQuery function $. getJSON will fetch JSON from specified URL. When document is loaded our custom function will process the key "BookcCount”, loop through array "Books”, create HTML code using JSON data stored in each element and append HTML code to div element with id "demo”.
See live demo here.

As you can see, it is very simple and easy to use JDE to fetch the data from dbBee as JSON document that can easily be used to build any kind of front-end application.

Building simple search application with pagination and search form will be the topic of our next blog.