Content Management using JSON feeds: dynamically add and manipulate content on your site

When I first discovered Zoho Creator, the idea of building a Web database that could be included in my own Web site sounded too good to be true. After a while, however, I found that I simply couldn’t get the content from my applications to display correctly for my site. I wanted more power to match the format of the content being displayed to my own site’s style. Using the standard iframe or javascript codes provided by Zoho Creator, the imported information simply wasn’t in the format I particularly wanted. Furthermore, I was disappointed that I couldn’t programmatically display certain information and hide other information.

Then, I discovered the power of JSON. According to Wikipedia, “JSON (JavaScript Object Notation) (Pronounced like Jason, IPA /d?e?s?n/) is a lightweight computer data interchange format. It is a text-based, human-readable format for representing simple data structures and associative arrays (called objects).” In simpler terms, the JSON feed from your Zoho Creator application is packaged into a single javascript variable. You can decipher the data from your application by parsing out the nested arrays. For a sample of the codes for parsing this information, please see below:

<!–

Load the data from Zoho Creator using the following format:

http://creator.zoho.com/{Username}/json/{ViewNumber}/

This will load a single javascript variable containing all of the data from your view

–>

<script src=”http://creator.zoho.com/lockworld/json/6/”></script>

<!–

Parse out the individual fields in each array for each record from the main variable, which will be named using the following convention:

zoho{username}view{view number}.{form name}

–>

<script>
for (var j=0; j<zoholockworldview6.catalog_example.length; j++){
var NewArray=zoholockworldview6.catalog_example[j];
var ItemName = NewArray.Item_name;
var ItemPrice = NewArray.Item_price;
var PayPal = NewArray.PayPal;
var Description = NewArray.Description;
var DetailLink = NewArray.DetailLink;
document.writeln(”<p><b><i>” + ItemName + “</i></b>”);
document.writeln(” $” + ItemPrice);
document.writeln(”<br>”);
document.writeln(PayPal);
document.writeln(”<br>”);
document.writeln(Description);
document.writeln(”<br>”);
document.writeln(DetailLink);
document.writeln(”</p><hr>”);
}
</script>

This is a simplified script, of course, which will simply write out each record in your database. You can easily see, however, how you can do more with the data. For example, you can create filters that will only display a specific record if the appropriate criteria are met. Furthermore, you can specifically customize the way the text is displayed using your own style sheet. You might also consider creating “alternate” fields in your database which will replace the default fields. Since the example above displays my sample product catalog I created a few weeks ago, you can use this structure to create time-sensitive discounts…simply add fields to your database with the reduced price and a date range to apply the price. Compare the current date/time with your date range and display the discount price if it falls within the range. You can also display the “original” price crossed out to your viewers using this method, so they will know how much of a discount they are getting.

Another possibility is to compare the data in your JSON feed with specific credentials supplied by your user. Let’s say, for example, that you’ve used Zoho Creator to collect information from your visitors, including their e-mail addresses. You can easily create a form on your site where the visitor can enter his/her e-mail address, and you can set your page to only display the records from your database with a matching e-mail address.

In reality, the possibilities are endless for how you can manipulate and display the information from your Zoho Creator applications on your site. Programmatically select and display certain records based on date/time values, user credentials, user cookies, URL parameters, form controls, and any other javascript functions you want.

I’ve said it before, and I’ll say it again: “Now that’s powerful stuff, especially from a free Web tool!”

That’s all for today. In my next post, I’ll weigh the pros and cons of using JSON in your Web site.

4 Replies to “Content Management using JSON feeds: dynamically add and manipulate content on your site”

  1. I am having difficulty loading the json and subsequently parsing it. I have loaded and parsed json feeds from Google (Blogger), but it is my understanding that json feeds vary in structure. I am not using ajaxincludes.

    Let’s say I have server space; how do I go about loading a json feed from zoho, parse it, and display it on a page?

  2. Hi Kevin,

    I’ve been experiencing problems with some of my JSON feeds, so the first thing you’ll want to do is to ensure that your JSON feed is working properly. Open the Zoho View you want to export, click on the “Export” link, and click on the “public link” for the JSON feed (you may need to enable private links for your application). You should see some garbled data starting with “var zoho{your user name}view{number} =” – if you see “//Error occured while fetching data. Your data is safe,” or some other error message, you may need to contact Zoho’s customer support (http://creator.zoho.com/talkback.do) for more assistance. In my case, this problem has to do with the use of multi-select fields within the database.

    If you don’t see the error above, here’s how you process JSON feeds from Zoho Creator:

    Step 1: Load the data

    From any view in your Zoho Creator application, click on “Export Data” from the top of the view. If your application is listed as “private,” you will need to click the “enable private links” button to create a set of “public links” to your data.

    Copy the location of the “private link” hyperlink next to the image.

    In the HTML code of the page where you want to load the data, enter <script src=”{THE URL YOU COPIED}“></script>

    Step 2: Parse the data
    The tricky part is translating the JSON feed into a set of “regular” javascript variables. Zoho will automatically name the single variable which contains all of your data using the following convention: zoho{username}view{view number}. Within this variable is another single variable which contains the name of your application itself. Because spaces and special characters aren’t allowed, you’ll probably want to view the raw data to figure out exactly what this variable is named. Go the the “public link” URL for your view and view the HTML source code (right-click and “View Source” or “View Page Source” in IE/Firefox, or available in the “View” menu). The very first value you see in quotes will be your application name. This is an essential component in parsing out your data.

    Next, you will need to set up a repeating string of code which will allow you to work with individual records. Here’s how it will look (Please replace the items in {brackets} with your own values):

    <script>
    for (var i=0; i<zoho{username}view{number}.{applicationName}.length; i++){
    //This will repeat the code below once for every unique record in the database

    var newArray = zoho{username}view{number}.{applicationName}[i];
    //This gives you a simpler array name to work with within each record,
    //but it is not an essential step.

    var ValueOne = newArray.{column name};
    //This assigns the value for a specific column within the current record (i) to a temporary variable.
    //Again, this is to simplify the codes you need to write to work with the data, but is not necessary.
    //Repeat this step for every column available in your Zoho Creator view if you want to

    //Insert some codes to manipulate the data. For example:
    if (ValueOne==”Approved”){
    document.writeln(ValueTwo);
    }
    //This sample code will write the data to your Web page provided the current record’s value in this column is equal to “Approved” (Note that javascript is case-sensitive).
    //You will want to write your own code to manipulate or display the actual data from your Zoho application.

    }
    //The steps above will be repeated for every record in your database.

    </script>

    It’s hard to write the instructions for parsing JSON feeds without having a “real” feed to work with, since all of the variables change with every application (I’d use one of mine, but most of the data I include are very complex, and probably would not help clear things up). If this does not help, please feel free to contact me again, and I will set up some more detailed instructions along with a sample, simplified, JSON feed so you can see how this works in more detail.

    Alternatively, you might get some help from understanding both how JSON scripts are built and/or displayed by visiting “The Javascript Reference Series” at http://www.hunlock.com/blogs/Mastering_JSON_(_JavaScript_Object_Notation_).

  3. Thanks Doug!

    Your comment was really helpful. It turns out the main problem I was having is that I was not using the right application name.

  4. Unfortunately, I noticed that if you use the link that Zoho provides in the "More actions" => "Export data" => "JSON feed" menu option, the JSON feed is incorrectly formed. They'll give you a link something like this:

    http://creatorexport.zoho.com/lockworld/sample-catalog-function/json/View_Sample_Catalog/

    But the JSON output they provide is missing the variable declaration at the beginning (var xyz=), so I have no idea how you would use it.

    Instead, figure out the ID of the view you want to export (You can do this by editing the view you want to export in Zoho Creator, and looking for the number in the URL after your username. For example, the sample catalog's ID is 6, which I can find because when I click the "edit" link from the catalog, the URL I'm taken to is http://creator.zoho.com/lockworld/view/6/edit/).

    Once you know the ID number of the view you want to use, you can incorporate it into a link formatted like the one below:

    http://creator.zoho.com/{Your Username}/json/{The View ID}/

    For example, the sample catalog's JSON URL is:

    http://creator.zoho.com/lockworld/json/6/

    This URL will export the JSON feed correctly, and you can follow the instructions above to try to parse out the data to display on your website.

Leave a Reply

Your email address will not be published. Required fields are marked *