XML, read, send, write: Javascript client to Express/Node.js server

Do you like not having a reference to build something? As well known as these three technologies are, I was hard-pressed to find another article demonstrating a model of them working in tandem. In fact, I didn't find one. So, I gave birth to this one!

To clarify eXtensible Markup Language (XML) is similar to HTML but with the design to store and transport data. With that being said let's first examine some of the differences that make XML. If you would like to skip this part (TL/DR) and want to dive into some working code skip down to Now let's get to some code section.

Like HTML we will see tags and attributes but unlike HTML they are not predetermined but rather determined by the author of the XML doc. You may see XML such as the following with no attributes:

That XML is nice and neat. It is easily readable and can easily be parsed and added to a database. When that XML hits your xml parser you'll get some JSON that looks like this:

Looks good! But what if we have XML that uses attributes to store the data and what if we add some other meta tags for good measure? That is a bit more challenging. It's not extensible, meaning that you won't be able to easily change it in the future and that your application may have to change with it should the document structure change. We'll now take the same data and store it in XML using attributes and see how the JSON differs. Take this for example:

Now for the parser that we will be using on our Node/Express back-end,express-xml-bodyparser, I found that it doesn't particularly like those first three lines so I just removed them with some JavaScript. You can see the repo if you're interested in seeing how (check public/app.js). Now, let's explore our new albums JSON:

As you can see our parser has made our JSON a little more nested and If you can imagine, the more nested your XML tags and the moreattributes that you have when using the former attribute syntax the more nested and complicated your resulting JSON will be making it harder to extend. Lastly, attributes are mainly used for metadata storage.

Now let's get to some code

I made a minimal front-end using HTML, JavaScript, CSS and the jQuery library. We'll start with my HTML. I have a 46 line HTML doc but we'll look at the lines that are most significant to this topic.

Checkout line 4. I have an input that accepts only xml. 🤔 Now that we've seen that let's look at our app.js. Similar to the HTML file I have only shared a gist of the lines that are most important to this article.

A little bit about these two functions processFile and sendXML.processFile will be called when a user presses the “Upload” button on our app and will initiate the reading and initial parsing of our XML so that it will be ready to send to our Express server.

In the case that we have XML similarly structured toalbum.attribute.xml then we would need to remove the first three lines for this XML to work with our XML parser in our server. This is what is happening on lines 22 & 23. NOTICE that on line 22 we make an assumption that his app will only be used for uploading XML for albums. We can make it more dynamic but the purpose of this post is to show how to take an XML file in on the front-end, parse it on the back-end, and persist the data in a database of our choosing.

With that being said, let's take a look at our server.js! It's a minimal server:

This server uses sqlite3 to persist our data and uses the express-xml-bodyparser so that we can actually work with the data that is passed to it from our front-end. If we jump to lines 47 of our server.xml.js we see that we do a post and take the body of our parsed xml, loop over it, and create the appropriate query and voila! we can add it our database.

In the immortal words of Bugs Bunny “That's all folks!”

A full repo of this project can be seen here.

<albums>
 <album>
  <artist>Prince</artist>
  <title>Purple Rain</title>
  <year>1984</year>
  <awards>
   <grammy>3</grammy>
  </awards>
 </album>
 <album>
  <artist>Rick James</artist>
  <title>Street Songs</title>
  <year>1981</year>
  <awards>
   <grammy>1</grammy>
  </awards>
 </album>
</albums>

I hope this is helpful to someone! Let me know what you think!