Using XML and JSON to build an awesome interface

cesar_codes profile image Cesar Rosales ・2 min read

In this post, I'll illustrate how my team and I were able to leverage the strengths of two different technologies that aren't generally used together in order to develop one kick ass software solution...

You see, in our industry, the antagonization of competing technologies is quite common and one has to look no further than the common serialization formats of XML and JSON to see a good example of it.

There appears to be a divide between programmers who have worked with XML and its related technologies and others who work with JSON and its related technologies. So much so that certain programmers either remain stagnant in what they know and other programmers refuse to learn good technologies only because it's not the flavor of the month.

So.... a few months ago I started working on a fairly large middleware project in which the basic idea was to receive an XML data payload from an external system, parse it, apply business logic, and then create new objects which would then be serialized into XML messages to be consumed by an internal system API. Like this:

xml json integration

As with most projects, the requirements for this project evolved and we were able to make our product incredibly richer by leveraging the strengths of XML and JSON.

How so, you ask? Well, we realized that we could derive a substantial amount of value for our users if we included a UI in which a user could review the data model, prior the ultimate XML serialization into our internal system's API. Furthermore, we realized that we could use the awesome power of Angular binding in order to quickly develop a modern UI, but the problem was that the data formats we were working with were XML. Therefore, we came up with the idea of parsing the initial XML payload into a C# data model that we could then serialize into JSON (quickly done with Json.NET ;-D), store it in our database, and then have an Angular UI bind it from that database for user review. Once the user did their necessary modifications on the UI, we could then re-serialize the revised JSON object from Angular into C# and ultimately back to XML. Like this:

xml json integration

And there you have it, we were able to exceed our initial expectations and bring a modern Angular application experience to our users quickly by combining the powers of two technologies that are more often thought of as rivals than as partners.


Editor guide
ben profile image
Ben Halpern

Ah great stuff! This is the happiest post I've ever seen about XML. 😄

jamesmalvi profile image
Jaimie Malvi

Wow, great article, this tool may help to pretty JSON


panditkalpit profile image
Kalpit Pandit

Check this JSON Validator, formatter and tree viewer. Also they are providing share link and make request feature which is really cool to test your json.