Get Azure Blob data in JSON

Question

I have the following code to obtain the list of blobs (uploaded files) of my blob container (named id):

app.controller("attachmentsController", ["$scope", "$http", function ($scope, $http) {
    var ct = this;

    $scope.go = function () {
        ct.id = $scope.id;

        var rootUrl = 'https://my-account.blob.core.windows.net';
        var containerPropertiesUrl = `${rootUrl}/${ct.id}?restype=container`;
        var blobListUrl = `${containerPropertiesUrl}&comp=list`;
        // get container's blob list
        $http.get(blobListUrl)
            .then(function (response) {
                ct.blobs = response.data;
            });
    };
}]);

In the response.data I obtain XML:

<?xml version="1.0" encoding="utf-8"?>
<EnumerationResults ContainerName="https://my-account.blob.core.windows.net/000002">
<Blobs>
<Blob>
<Name>logo-separator.svg</Name>
<Url>https://my-account.blob.core.windows.net/000002/logo-separator.svg</Url>
<Properties>
<Last-Modified>Fri, 25 Aug 2017 10:00:01 GMT</Last-Modified>
<Etag>0x8Y4EBAX0D5850C7</Etag><Content-Length>2048</Content-Length>
<Content-Type>application/octet-stream</Content-Type><Content-Encoding />
<Content-Language />
<Content-MD5>BDm9NV0Zn4e6zQO2e/D1Dg==</Content-MD5><Cache-Control />
<BlobType>BlockBlob</BlobType>
<LeaseStatus>unlocked</LeaseStatus>
</Properties>
</Blob>
</Blobs>
<NextMarker />
</EnumerationResults>"

Is there a way to get all this in the JSON format, in order to be able to use it in my angular application?

Answer 1

This may not be the best solution but here's what i did...

I already had Microsoft Azure Storage Explorer installed on my mac. All files were uploaded already - basically just select all, right click and Copy - create a new .json file and paste! just tidy the code and you're good to go.

{
    "CloudHub.Azure.Storage.Blobs": 
    {
            "connectionString": "BlobEndpoint=https://mystorage.blob.core.windows.net;SharedAccessSignature=....",
            "containerName": "mycontainer",
            "accountUri": "https://mystorage.blob.core.windows.net",
            "sourceFolder": "",
            "items": [{
              "relativePath": "Image1.JPG",
              "snapshot": ""
            }, {
              "relativePath": "Image2.JPG",
              "snapshot": ""
            }, {
              "relativePath": "Image3.JPG",
              "snapshot": ""
            }],
            "sasToken": "SAS-TOKEN....."
          }
        }

This isn't a good solution for pulling dynamic blob list. My requirement was to pull a list of all photos I had uploaded in the container and I just needed the relative paths.

Cheers..

Answer 2

Based on the latest Azure List Blobs REST API response format (last updated 23 August 2017), the response body is in XML format.

You will need to implement custom function or use some npm package such as xmltojson for converting the response body from XML to JSON format.

Reference:

Azure List Blobs REST Response

Answer 3

My (temp?) solution as for now is to use a custom function that transforms XML in JSON:

app.controller("attachmentsController", ["$scope", "$http", function ($scope, $http) {
    var ct = this;
    // Changes XML to JSON
    ct.xmlToJson = function(xml) {

        // Create the return object
        var obj = {};

        if (xml.nodeType == 1) { // element
            // do attributes
            if (xml.attributes.length > 0) {
                obj["@attributes"] = {};
                for (var j = 0; j < xml.attributes.length; j++) {
                    var attribute = xml.attributes.item(j);
                    obj["@attributes"][attribute.nodeName] = attribute.nodeValue;
                }
            }
        } else if (xml.nodeType == 3) { // text
            obj = xml.nodeValue;
        }

        // do children
        if (xml.hasChildNodes()) {
            for (var i = 0; i < xml.childNodes.length; i++) {
                var item = xml.childNodes.item(i);
                var nodeName = item.nodeName;
                if (typeof (obj[nodeName]) == "undefined") {
                    obj[nodeName] = ct.xmlToJson(item);
                } else {
                    if (typeof (obj[nodeName].push) == "undefined") {
                        var old = obj[nodeName];
                        obj[nodeName] = [];
                        obj[nodeName].push(old);
                    }
                    obj[nodeName].push(ct.xmlToJson(item));
                }
            }
        }
        return obj;
    };

    $scope.go = function () {
        ct.id = $scope.id;

        var rootUrl = 'https://my-account.blob.core.windows.net';
        var containerPropertiesUrl = `${rootUrl}/${ct.id}?restype=container`;
        var blobListUrl = `${containerPropertiesUrl}&comp=list`;
        // get all possible values
        $http.get(blobListUrl)
            .then(function (response) {
                var xmlString = response.data;
                var parser = new DOMParser();
                var xml = parser.parseFromString(xmlString, "text/xml");
                var myObj = ct.xmlToJson(xml);
                ct.blobs = myObj.Blobs;
            });
    };
}]);