In this post I give some JavaScript code that takes a JavaScript object variable and serializes it to XML. The code works both on Node.js and in the browser. JavaScript developers frown on XML and will advocate JSON. So an XML solution is difficult to find, I have based this code on a StackOverflow answer.
Background
So, I am again contemplating serialization formats. I want to do some web-scraping and I reiterate that Excel Developers should not do this in VBA but instead in a Chrome Extension which is a JavaScript program running in the Chrome Browser. A Chrome Extension can scrape some information and then pass this along as a payload to a web server by calling out with an HTTP POST request. The receiving web server ought to a simple local server dedicated to listening for that particular Chrome Extension. Previously on this blog, I have given code where a C# component running in Excel can serve as a web server; in that example the payload was in JSON format.
A while back on this blog I went crazy for JavaScript once I found the ScriptControl can parse JSON into an object query-able by VBA code. I have since cooled on this JSON/ScriptControl design pattern and have realised I still have a soft spot for XML, mainly for the inbuilt XML parser with which all VBA developers will be familiar. But as mentioned above Javascript developers prefer JSON and so you won't find many examples of serialization to XML out there. So below is some working code based on a StackOverflow answer.
Unifying Browser and Node.js development
I find JavaScript development quite challenging as I'm never sure I'm using the optimal development environment. Using Node.js in Visual Studio is very good but I do not know how to get Visual Studio to attach and debug client side code. To debug client side code I use Chrome's good debugger tools and Notepad++ (I know) or Visual Studio Code. I find I write code in two different styles for each environment. I'd like to write code once for both client and server and for that I have a trick to show you.
By modularizing the code in separate files or modules a JavaScript project can be broken up into more manageable pieces. To control visibility of a module's code to outside callers we use the module.exports construct but this is not available in the browser so we have to add the code to the browser's Window object instead. This is all explained in this article Writing JavaScript modules for both Browser and Node.js by Matteo Agosti.
In the article Matteo Agosti gives a JavaScript class (don't be misled by JavaScript's odd class-by-prototype syntax) in a separate file and it uses the module.exports to make it visible to other files/modules. The code Matteo gives has an encompassing IIFE (Immediately Invoked Function Expression) to determine if running in a browser or not. This IIFE syntax and also the class-by-prototype syntax can be a little confusing and I'd recommend copying, pasting and editing for your own purposes and this is what I did for me.
The code
Node.js dependencies
The code below adds value in that it will run in a Node.js project as well as a browser. Any Node.js project will require the following npm packages installed:
- xmldom
- xmlserializer
Test object
An object called foo is created in JavaScriptObjectToXml.prototype.testJavascriptObjectToXml()
var foo = new Object();
foo.prop1 = "bar";
foo.prop2 = "baz";
foo.objectArray = [];
var subObject = new Object();
subObject.laugh = "haha";
foo.objectArray.push(subObject);
var subObject1 = new Object();
subObject1.greeting = "hello";
foo.objectArray.push(subObject1);
foo.numberArray = [];
foo.numberArray.push(0);
foo.numberArray.push(1);
foo.numberArray.push(2);and a JSON representation of this object would be
{"prop1":"bar","prop2":"baz","objectArray":[{"laugh":"haha"},{"greeting":"hello"}],"numberArray":[0,1,2]}but an XML reprentation would be
<foo xmlns="null" prop1="bar" prop2="baz">
<objectArray>
<objectArray-0 laugh="haha"/>
<objectArray-1 greeting="hello"/>
</objectArray>
<numberArray numberArray-0="0" numberArray-1="1" numberArray-2="2"/>
</foo>Code Listings
And so here are the full listings:
JavaScriptObjectToXml.js - this is the serialization logic
'use strict';
// module exporting for node.js and browsers with thanks to
// https://www.matteoagosti.com/blog/2013/02/24/writing-javascript-modules-for-both-browser-and-node/
(function () {
var JavaScriptObjectToXml = (function () {
var JavaScriptObjectToXml = function (options) {
var pass; //...
};
JavaScriptObjectToXml.prototype.testJavascriptObjectToXml = function testJavascriptObjectToXml() {
try {
// debugger; /* uncomment this line for a breakpoint for both node.js and the browser */
var foo = new Object();
foo.prop1 = "bar";
foo.prop2 = "baz";
foo.objectArray = [];
var subObject = new Object();
subObject.laugh = "haha";
foo.objectArray.push(subObject);
var subObject1 = new Object();
subObject1.greeting = "hello";
foo.objectArray.push(subObject1);
foo.numberArray = [];
foo.numberArray.push(0);
foo.numberArray.push(1);
foo.numberArray.push(2);
//console.log(JSON.stringify(foo));
var retval = this.javascriptObjectToXml(foo, 'foo');
console.log(retval);
return retval;
}
catch (err) {
console.log(err.message);
}
};
JavaScriptObjectToXml.prototype.javascriptObjectToXml = function javascriptObjectToXml(obj, objName) {
try {
var rootNodeName = 'root';
var xmlDoc = this.createXmlDocumentRoot(rootNodeName);
this.serializeNestedNodeXML(xmlDoc, xmlDoc.documentElement, objName, obj);
return this.getXmlSerializer().serializeToString(xmlDoc.documentElement.firstChild);
}
catch (err) {
console.log(err.message);
}
};
JavaScriptObjectToXml.prototype.createXmlDocumentRoot = function createXmlDocumentRoot(rootNodeName) {
try {
var xmlDoc;
if (typeof document !== 'undefined') {
/* for browsers where document is available */
xmlDoc = document.implementation.createDocument(null, rootNodeName, null);
}
else {
/* for node.js code, needs npm install xmldom */
var DOMParser = require('xmldom').DOMParser;
xmlDoc = new DOMParser().parseFromString('<' + rootNodeName + '/>');
}
return xmlDoc;
}
catch (err) {
console.log(err.message);
}
};
JavaScriptObjectToXml.prototype.getXmlSerializer = function getXmlSerializer() {
try {
if (typeof document !== 'undefined') {
/* for browsers */
return new XMLSerializer();
}
else {
/* for node.js code, needs npm install xmlserializer */
return require('xmlserializer');
}
}
catch (err) {
console.log(err.message);
}
};
JavaScriptObjectToXml.prototype.serializeNestedNodeXML = function serializeNestedNodeXML (xmlDoc, parentNode, newNodeName, obj) {
/* based on StackOverflow answer
/ https://stackoverflow.com/questions/19772917/how-to-convert-or-serialize-javascript-data-object-or-model-to-xml-using-ext#answer-48967287
/ by StackOverflow user https://stackoverflow.com/users/355272/martin */
try {
if (Array.isArray(obj)) {
var xmlArrayNode = xmlDoc.createElement(newNodeName);
parentNode.appendChild(xmlArrayNode);
for (var idx = 0, length = obj.length; idx < length; idx++) {
serializeNestedNodeXML(xmlDoc, xmlArrayNode, newNodeName + '-' + idx, obj[idx]);
//console.log(obj[idx]);
}
return; // Do not process array properties
} else if (typeof obj !== 'undefined') {
var objType = typeof obj;
switch (objType) {
case 'string': case 'number': case 'boolean':
parentNode.setAttribute(newNodeName, obj);
break;
case 'object':
var xmlProp = xmlDoc.createElement(newNodeName);
parentNode.appendChild(xmlProp);
for (var prop in obj) {
serializeNestedNodeXML(xmlDoc, xmlProp, prop, obj[prop]);
}
break;
}
}
}
catch (err) {
console.log(err.message);
}
};
return JavaScriptObjectToXml;
})();
if (typeof module !== 'undefined' && typeof module.exports !== 'undefined')
module.exports = JavaScriptObjectToXml;
else
window.JavaScriptObjectToXml = JavaScriptObjectToXml;
})();server.js - this is web server file
'use strict';
{
try {
var JavaScriptObjectToXml = require('./JavaScriptObjectToXml');
var v = new JavaScriptObjectToXml();
var fooAsXml = v.testJavascriptObjectToXml();
}
catch (err) {
console.log('Could not find JavaScripObjectToXml.js module:' + err.message);
}
}
require('http').createServer(function (req, res) {
try {
var q = require('url').parse(req.url, true);
if (q.pathname === '/') {
/* it's the request for our serialized xml */
res.writeHead(200, { 'Content-Type': 'text/xml' });
res.end(fooAsXml + 'n');
}
else {
var filename = "." + q.pathname;
var fs = require('fs');
fs.readFile(filename, function (err, data) {
if (err) {
res.writeHead(404, { 'Content-Type': 'text/html' });
return res.end("404 Not Found");
}
res.writeHead(200, { 'Content-Type': 'text/html' });
res.write(data);
return res.end();
});
}
}
catch (err) {
console.log(err.message);
}
}).listen(process.env.PORT || 1337);HtmlPage.html - this is for serving to the client
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta charset="utf-8" />
<title></title>
</head>
<body>
<p><span style="font-family:Courier New, Courier, monospace">Look in the console!
Do this by right-click menu and then Inspect to get the DevTools window
then click on the Console tab</span></p>
<script src="JavaScriptObjectToXml.js"></script>
<script>
var v = new JavaScriptObjectToXml();
var fooAsXml = v.testJavascriptObjectToXml();
</script>
</body>
</html>Some VBA test client code to ensure XML does parse in VBA/MSXML parser library.
Option Explicit
Sub Test()
Dim xhr As MSXML2.XMLHTTP60
Set xhr = New MSXML2.XMLHTTP60
xhr.Open "GET", "http://localhost:1337/", False
xhr.send
Debug.Print xhr.responseText
Dim xmlDoc As MSXML2.DOMDocument60
Set xmlDoc = New MSXML2.DOMDocument60
Debug.Assert xmlDoc.LoadXML(xhr.responseText) '* true means it parsed fine
End SubRunning the code
So the above files are to be placed into a Visual Studio instance with a blank Node.js project and press F5 and the Xml representation should appear in both the command line window spawned by Visual Studio and in the browser spawned by Visual Studio. This proves it works on the server. To see it working on the client side change the address in the browser to point to http://localhost:1337/HtmlPage.html and then look in Chrome's console (instructions are on the web page).
Final Thoughts
I'm still not totally happy with serialization formats. I'd love to get something from a webservice and paste directly onto an Excel worksheet. I need to think about this.
Unifying browser and server code should be a good win that will pay dividends in the long run so I am happy about that.
In the meantime, enjoy!
No comments:
Post a Comment