Query JSON data from Azure Blob Storage with jQuery

Question

I have some data in an Azure blob storage. The data is JSON and it has been saved with the "application/json" content type.

My app would be hosted at "myapp.com", a domain that contains a CNAME to "myapp.cloudapp.net". I guess I should create a custom domain name like "storage.myapp.com" that poins to my Azure storage.

But then? Can I use JSONP or other way to make JSON ajax calls to Azure storage?

How would be the better way to do this?

Thanks a lot.

Answer 1

Well, apparently Azure blob storage doesn't support JSONP straightaway, but it can be done.

For example, if I store this JSON in an Azure blob:

{"Name":"Valeriano","Surname":"Tortola"}

And I try:

<script type="text/javascript">

    $.getJSON("https://myaccount.blob.core.windows.net/jsonptests/data?jsoncallback=?",
             function (data) {
                 alert(data.Name);
             });
</script>

It doesn't work. Well, actually the browser download the data but there is no call back. So, considering how JSONP works, if I save this JSON with the callback function:

dataCallback({"Name":"Valeriano","Surname":"Tortola"})

And I do:

<script type="text/javascript">

    function dataCallback(data) {
        alert(data.Name);
    }
</script>

<script type="text/javascript" src="https://myaccount.blob.core.windows.net/jsonptests/data"></script>

Then the dataCallBack get executed :) The disadvantage is that the callback function name has to be harcoded, but it's better than nothing.

Happy days, but if anyone has a better way would be great.

Cheers.

Answer 2

The Windows Azure Blob Storage REST interface returns XML (POX), not JSON... However it's simple to query from JavaScript! Call you container URL with restype=container and comp=list:

$(document).ready(function () {         
    // Retrieve list of Blobs
    var containerUrl = 'http://tcontepub.blob.core.windows.net/json/';
    $.ajax({
        type: 'GET',
        url: containerUrl + '?restype=container&comp=list',
        dataType: 'xml',
        success: listBlobs
    });
});

Then you can do a basic parsing of the XML returned. Here I will extract the URL and display it in a div.

function listBlobs(xml) {
    $(xml).find('Blob').each(function() {
        var url = $(this).find('Url').text();
        $('#panel').append(url + '<br />');
    });
}

I have tested this in an HTML page that was itself stored as a Blob.

Unfortunately, I'm afraid the JavaScript "Same Origin Policy" will make this fairly difficult to use in practice.