Find a post...

DNN-Connect Blogs

4-Ways to Work with JSON Data Using StruXured Content (2sxc)

Many cool visualizations run in JavaScript, so your scripts must be able to get the content-items as JSON. Here are the 4 most important ways to do it.

1. Publish a Visual Query for Your Template Only

You can easily create a query against your SQL, CSV, XML or whatever. You can even determine parameters like "category" to come from a URL. All this is documented on the Visual-Query introduction. By default, this is assigned to a server-side template, but it's easy to open up to provide JSON. Here's how:

  1. Go to query admin > permissions > create new:
  2. In the resulting dialog, aside from a nice name you want to specify read-permissions for people with view-rights. You probably want to limit it to "View" and not to "Anonymous". The difference is that View means that the JavaScript query is actually coming from a valid DNN module (which has permissions) and not from an anonymous source in the internet. 

Now that it's published, your JS can easily access it through a few lines of code. 

  • jQuery in DNN uses the $2sxc helper - read more in the API wiki
  • AngularJS with 2sxc4ng: sxc.query("All").then(function(result) { your code } );

2. Publish a Visual Query for AJAX Requests from Other Sites

This is the same procedure as above, with the difference that you'll want to to allow anonymous access.  

Since you will probably access this query from external, you will be missing both a DNN-context (incl. the JS Services-Framework) and a Module-context. This means there will be no HTTP headers telling the query what module this is for. So you'll have to use your own JS libraries like jQuery.ajax or AngularJS $http. The API address will be

[yoursite]/desktopmodules/2sxc/api/app-query/[app-name]/[query-name]. 

3. Publish the Module-Instance-Data as JSON

There are various use cases where a query doesn't match your need, because you need to get just the items which an editor added to a module using template/content paradigm. 

  • A common example is an image-slider, which of course only wants to get the slide-items assigned to the current module, in the correct order. 
  • Another common example is a template which may do some data-pre-processing in your init-code, resulting in different items than can be filtered using a visual query.

To do this, you must:

  1. enable data-publishing on the template settings
  2. tell the data-publisher which streams shall be available on JSON (to protect from accidentally serving too much data or secret data.

To then access this data from the module itself, you need the $2sxc object again, and will get a javascript event returning the data. 

4. Create your own WebAPI for your Templates

Maybe you want more control over what is streamed, about the type of query you want to run or just want to do something which isn't available out of the box. You can just create your own ASP.net WebAPI for this. The quick basics:

  1. add a folder called api to your app-folder
  2. create some SomethingController.cs files according to ASP.net WebAPI conventions
  3. implement your api
  4. use the $2sxc(...).webApi.get(...) in JavaScript to talk with your API

More documentation in the WebAPI docs or the $2sxc docs for the JavaScript side.  

TL;DR

So you have at least 4 ways to solve just about any kind of JSON need you have, from the quick-and-effective to full-total-control. 

Love from Switzerland,
Daniel


Daniel Mettler grew up in the jungles of Indonesia and is founder and CEO of 2sic internet solutions in Switzerland and Liechtenstein, an 20-head web specialist with over 800 DNN projects since 1999. He is also chief architect of 2sxc (see forge), an open source module for creating attractive content and DNN Apps.



Read more posts by Daniel Mettler
Daniel Mettler learned programming with the bible translation computer of his parents, deep in the jungles of Indonesia. Since he was only 12 years old at that time and the BIOS only had a version of BASICA, that's what got him started. With 16 he went back to Switzerland and learned German and basic city-survival skills. Equipped with this know-how he founded 2sic internet solutions in 1999 which was focused on web solutions on the Microsoft platform. After a few self-developed CMSs 2sic switched to DNN in 2003 and has been one of the largest partners (17 employees, 700+ projects) in Europe. Daniel is also the chief architect behind the open source 2sxc, a strong promoter of standardization (boostrap, patterns, AngularJS, checklists, etc.) and loves to eat anything - dead or alive. His motto: if the natives eat it, it game.
Comment(s)

Hosting liberally provided by

Geoff Barlow 447 4
Philipp Becker 5792 7
DNN-Connect 428 6
Peter Donker 4641 26
Christopher Hammond 649 2
Olivier Jooris 396 1
Daniel Mettler 11725 88
Clint Patterson 1 1
Jos Richters 65 1
James Rosewell 279 2
Will Strohl 1514 27
Ernst Peter Tamminga 388 4
Barry Waluszko 2077 2
Declan Ward 188 1
Gifford Watkins 721 9
Torsten Weggen 2031 3