- 2 minutes to read

Base64Decode XML from JSON

This Liquid-based example displays a base64 encoded XML part of a JSON message in XML format.

graph LR Json[JSON Message with base64encoded XML content] stylesheet(Liquid Stylesheet)--> |Transform| xml["XML"] Json --> stylesheet

With Nodinite, you can allow end-users to view message payload in other formats using one or more Stylesheets.

You can use this example to style a JSON based message into another XML message. This can be a very useful feature to help you remove sensitive information from end-users.

1. Input JSON

The following data is an example of a JSON message with a base64 encoded content:

{
	"method": "post",
	"queries": {
		"systemProperties": "Run Details"
	},
	"path": "/orders/messages",
	"host": {
		"connection": {
			"name": "/subscriptions/ae3da538-3e2b-4490-9feb-7dfe30a6683c/resourceGroups/Default-Storage-NorthEurope/providers/Microsoft.Web/connections/servicebus"
		}
	},
	"body": {
		"ContentData": "PG5zMDpPcmRlcnMgeG1sbnM6bnMwPSJTdXBwbHlDaGFpbi5TY2hlbWFzLzEuMCI+CiAgPE9yZGVyPgogICAgPElkPjEzMzc8L0lkPgogICAgPEFtb3VudD4xMzM3PC9BbW91bnQ+CiAgICA8Q2l0eT5Ta2VsbGVmdGXDpTwvQ2l0eT4KICA8L09yZGVyPgo8L25zMDpPcmRlcnM+",
		"CorrelationId": "BOWC123",
		"Properties": {
			"ExtendedProperties/1.0#SystemInterchangeId": "BOWC123"
		}
	}
}

2. Liquid Stylesheet

Use a Liquid Stylesheet.

<!DOCTYPE html>
<html>
	<body>
		<textarea rows="50" cols="50" style="border: none;outline: none;" id="demo"> </textarea>
		<script>
function htmlEntities(str) {
	var htmlString = String(str).replace(/&/g, '&amp;').replace(/</g,'&lt;').replace(/>/g, '&gt;').replace(/"/g, '&quot;');
	return htmlString;
}
	function codemirroreditor(id) {
		var mime = 'application/xml';
		var editor = CodeMirror.fromTextArea(id, {
			lineNumbers: true,
			mode: mime,
			indentWithTabs: true,
			smartIndent: true,
			lineNumbers: true,
			matchBrackets: true,
			lineWrapping: true,
			autofocus: true,
			autoRefresh: true,
			extraKeys: { "Ctrl-Space": "autocomplete" }
		});
}

function b64DecodeUnicode(str) {
	return decodeURIComponent(atob(str).split('').map(function(c) {
		return '%' + ('00' + c.charCodeAt(0).toString(16)).slice(-2);
			}).join(''));
}

function displayXml() {
	document.getElementById('demo').innerHTML = htmlEntities(b64DecodeUnicode("{{ body['ContentData'] }}"));
	codemirroreditor('demo')
};

document.write('<pre style="margin:0"' + displayXml() + '</pre>');
			</script>
		</body>
	</html>

3. XML Output

If you apply the liquid example on the Input JSON, the following XML output is the result:

<ns0:Orders xmlns:ns0="SupplyChain.Schemas/1.0">
  <Order>
    <Id>1337</Id>
    <Amount>1337</Amount>
    <City>Skellefteå</City>
  </Order>
</ns0:Orders>

NOTE: The example performs a unicoded translation.

Next Step