XML-to-JSON convertor and remapper

• » Overview
• » Example (concept)
• » Usage & params
• » Example (with JAWS)
• » Notes

Overview

This is a jQuery plugin for converting data from XML to JSON format. However its real power lies in its ability to also remap data to a different structure. This can be useful when you have a plugin or application that requires JSON data, but the data is coming from an XML feed that you don't have structural control over. Data is remapped to the structure you need.

Example (concept)

So you could turn

into

or

into

Usage & params

The plugin runs on your XML data. It accepts two arguments:

storer (array) - an array that will hold the returned JSON data.

iterationNodePath (string) - a space-separated path to the iteration node, i.e. the repeated node that will form the sub-objects of your JSON data, e.g. root item or, if RSS, perhaps rss channel item

remap (object) - a map of XML paths (left) to JSON paths (right), the latter allowing you to stipulate the structure you require.

The plugin would typically run inside a success callback function after loading the XML via AJAX.

Example (with JAWS)

Take the example of my JAWS news ticker. That is populated with JSON data, in the following format:

But imagine the feed you've been asked to use to populate it is in XML, and in the following format:

Since the above JSON and XML structures differ notably (both in node names and in levels, e.g. the JSON has a 'moreInfo' node with its own children), you'd need to not only convert but also remap.

Here's how:

In the remap object, the the dots separate. So for example we not only rename the description to info, we move it inside a moreInfo object, thus changing the hierarchical nature of the data.

The source download includes this scenario, so you can see the conversion working.

Notes

Loading jQuery

By default, this script assumes you're loading jQuery via Google (why might you do this?). If, instead, you're loading jQuery from a local copy in your site folder, update the document ready handler (DRH) in the script file:

It's fantastic that you've done this, I've been looking for something to do this kind of remapping for ages and haven't had the time to write one myself!

What I've been intending to use it for is having a single XML data format for my image galleries, then letting the user switch between many different gallery / slider / zoomer / etc views (i.e. various different jQuery plugins for image browsing/viewing) and transforming the XML data on the fly into whatever JSON structure each specific plugin requires!

Thanks!

Thanks a lot, Marcus. It wasn't easy; well, the conversion part was, but the remapping was a real headache (see code) but, as you say, it's necessary in certain situations. I built it out of need, actually; I was trying to plugin my JAWS ticker for a client, but the feed was XML. Hence.

Might need some help with this.. If I take your feed for example:  and put this url into url: 'xml.xml' on line 11 in index.htm from the download package you provided the latest news doesn't appear? I also tried copying and pasting the source of your feed into xml.xml and one entry appears but when clicking on it the entry is blank. In order for this to work I have to change the settings under remap to match your feed? So instead of Sample headline 3 it should be  ?

James - e-mail me your starting code and the format of the JSON your require and I'll look into this. This script went through extensive testing so I'm confident we can crack it.

Does your library handle XML node attributes?

James - this is now fixed. The issue was you are reading in an RSS feed, not a normal XML feed, the difference being the former traditionally has 3 levels between and including the root and the iteration node (e.g. rss > channel > item) whereas a simple XML feed would probably be just two levels (e.g. root > item).

I am posting the revised source code to the site now and will post to my blog and the script's changelog re: this issue and its fix.

Thanks
Andy

Jay Koutavas - presently, no, but that's the obvious next step. Expect implementation of that by next week. If you get my blog RSS feed you'll get an alert when that's posted.

Hi there, greate code :)

Could you show an example of how does it handle XML nodes attributes?, I mean, how ther are converted into the JSON.

Thanks

Thanks, Ciul. Actually the issue of XML attributes is something I'm working on currently. It's a tough one; XML attributes do not translate well to JSON, as you cannot specify attributes of objects in JS, only child nodes. I am working on a strategy, though. Stay posted!