JSON – AzureDays

Tip – Serving .json File on Windows (IIS, IIS Express)

July 21, 2014

So what is wrong with the simple getJSON call? Why doesn’t it work?

<script type="text/javascript" src="http://code.jquery.com/jquery-latest.js"></script>
<script type="text/javascript">
  $(document).ready(function(){
     $.getJSON('data.json',function(result){
      alert("success");
    });
  });

It works fine in Firefox 11 but not in IE and Chrome. By default, IIS6 does not serve .json (no wildcard MIME type). So you will see a 404 not found thrown.

By default, IIS in Windows Server 2003 and beyond does not serve files that aren’t of a MIME type that it knows about (instead returning 404 errors).

So, to serve up JSON files you need to add a MIME type to IIS to allow it to serve that type of file. You can set it at the site level or at the server level.

Continue reading “Tip – Serving .json File on Windows (IIS, IIS Express)”

Snippets – Filtering JSON Using jQuery Grep, Filter, Map

July 13, 2014

When you have a JSON array, you may want to get one or more items from the array and display. jQuery offers two functions that can help: grep and filter.

$.grep(). Finds the elements of an array which satisfy a filter function. The original array is not affected.
$filter(). Reduce the set of matched elements to those that match the selector or pass the function’s test.
$.map(). applies a function to each item in the array, thus returning a modified array

In other words, $.grep() removes items from an array as necessary so that all remaining items pass a provided test; .filter() constructs a new jQuery object from a subset of the matching elements.

Also, filter is intended to be used with html elements, and that is why it is a chainable function that returns a jQuery object and it accepts filters like “:even”, “:odd” or “:visible” etc. You can’t do that with the grep function, which is intended to be a utility function for arrays.

Continue reading “Snippets – Filtering JSON Using jQuery Grep, Filter, Map”

Snippet – Setting MIME Types (Font Awesome or Custom Fonts or Json File Extensions Doesn’t Work When Deployed on Windows)

July 8, 2014

When using custom fonts on Windows Azure, users have reported issues. For example, Font Awesome icons would not display. Or even if the fonts do display, it might not display correctly on some devices, such as Windows Phones.

In other cases, you may have a file type that does not map to the right MIME type.

In fact, I exposed most of the JSON files with the .txt extension just to avoid the issue of IIS not serving up .JSON files as expected.

It turns out — the issue is that IIS 7 – 8.1 serves up the wrong MIME type for web font files. So you need to be sure the right MIME types are being served up for your font files, as shown here: Proper MIME type for fonts.

When deploying to an IIS servers you need to add MIME support.

Continue reading “Snippet – Setting MIME Types (Font Awesome or Custom Fonts or Json File Extensions Doesn’t Work When Deployed on Windows)”

Single Page Apps – Loading JSON Using Sammy

May 22, 2014

Sammy.js Single Page Applications (SPA) are web sites/applications which are consists of single page and provide smooth user experience in contrast with traditional click and refresh web pages. You can integrate data loading along with routing to provide your users with a site or app that “pops”. No waiting, because the data has already been loaded.

We will start with a prototype for a Sammy page, which provides a div whose identifier is main, where we will render the data. And the code to load the scripts.

Continue reading “Single Page Apps – Loading JSON Using Sammy”

Single Page App – Asynchronous Sample Using jQuery Promise to Render JSON Using Mustache

May 8, 2014

In the previous posts on promises Promises for Asynchronous Operations Using jQuery, you learned how you can build promises using jQuery Deferreds and Promises. And in External Templates Using Mustache, jQuery, you learned how to bring in an external template.

It is time to show a real life example of how this code comes together. And in doing so, we have the beginning for a Single Page App.

In this code example, you will see how to use jQuery Promises to: