XML to JSON JavaScript Objectifier

AcidJs.XmlToJson() JavaScript class is a simple XML to JSON converter and objectifier. It can be used with custom or public XML, REST APIs such as Last.FM, RSS and ATOM feeds, sitemaps, etc by converting the XML server responses to native JSON objects in the browser which are then instantly accessible by its simple to use JavaScript methods.

Requirements

• Modern browser with native JSON support. To enable in older browsers, use Douglas Crockford’s JSON2 or one of the various solutions on the Internet.
• Web Server.
• PHP.

Usage and API

Copy the entire AcidJs.XmlToJson/ directory from the distribution file, which can be downloaded at this page in the root of your project, then register the run-time script before the closing </body> tag of the page:

[sourcecode language=”xml”]
<script src="AcidJs.XmlToJson/Scripts/AcidJs.XmlToJson.js"></script>
[/sourcecode]

[sourcecode language=”javascript”](function() {
window.xmltojson = new AcidJs.XmlToJson();
})();[/sourcecode]

If you wish to keep the AcidJs.XmlToJson/ directory on another location, you can use the optional rootFolder property in the object initializer, and then make sure you also change the path in the SRC attribute of the script tag you used to register the XmlToJson runtime:

[sourcecode language=”xml”]
<script src="Scripts/AcidJs.XmlToJson/Scripts/AcidJs.XmlToJson.js"></script>
[/sourcecode]

[sourcecode language=”javascript”]
(function() {
    window.xmltojson = new AcidJs.XmlToJson({
        rootFolder: "Scripts/" // do not forget the trailing slash
    });
})();
[/sourcecode]

Once you initialize XmlToJson you will have access to the following methods:

getRemoteData(config)
Request XML, convert it to JSON on the server, then set and optionally return the JSON object. In the config you can defin the following properties: name, url, params (optional) and success callback (optional):

[sourcecode language=”javascript”]
window.xmltojson.getRemoteData({
    name: "slayer", // unique name that will be used to request the converted XML to JSON object locally
    url: "http://ws.audioscrobbler.com/2.0/", // remote / RESTFul service URL
    params: [{
            method: "album.getinfo"
        },{
            api_key: "XXXXXX" // your Last.FM API key
        },{
            artist: "Slayer"
        },{
            album: "Seasons in the Abyss"
        }
    ],
    success: function(data) {
        // the success call back returns the newly created data object that contains the converted JSON object and the config of the getRemoteData method
        console.log("data object: ", data); // return the entire data object
        console.log("JSON object: ", data.json); // return the converted XML to JSON object only
        console.log("data object name: ", data.name); // return the name of the data object
        console.log("request url: ", data.url); // return the request url
        console.log("request parameters as objects: ", data.params); // return the remote request parameters as objects
        console.log("removte request with the params as get data: " + data.remoteUrl); // return the removte request with the params as get data
    }
});
[/sourcecode]

getLocalData(name)
Returns the local instance of an existing JSON data object by it’s name (set in the name property of the config of the getRemoteData method)

[sourcecode language=”javascript”]
window.xmltojson.getLocalData("slayer");
[/sourcecode]

deleteData(data)
Deletes an array of stored data object(s) by specified name and makes them unavailable.

[sourcecode language=”javascript”]
window.xmltojson.deleteData(["slayer", "rss", "feedburner"]);
[/sourcecode]

Examples

Get Artist and Album Data from Last.FM (http://last.fm):

[sourcecode language=”javascript”]
window.xmltojson.getRemoteData({
    name: "slayer", // unique name that will be used to request the converted XML to JSON object locally
    url: "http://ws.audioscrobbler.com/2.0/", // remote / RESTFul service URL
    params: [{
            method: "album.getinfo"
        },{
            api_key: "XXXXXX" // your Last.FM API key
        },{
            artist: "Slayer"
        },{
            album: "Reign in Blood"
        }
    ],
    success: function(data) {
        console.log(data.json);
    }
});
[/sourcecode]

Get RSS feed from Feedburner (http://feedburner.com)

[sourcecode language=”javascript”]
window.xmltojson.getRemoteData({
    name: "feedburner",
    url: "http://feeds.feedburner.com/acidmartin",
    success: function(data) {
        console.log(data.json);
    }
});
[/sourcecode]

Parse Sitemap File

[sourcecode language=”javascript”]
window.xmltojson.getRemoteData({
    name: "feedburner",
    url: "http://acidjs.wemakesites.net/sitemap.xml.php",
    success: function(data) {
        console.log(data.json);
    }
});
[/sourcecode]

Using XmlToJson

• Check the demo page.
• Include on your page. Refer to the demo page included in the file you have downloaded.
• Have fun and don’t forget to check Acid.JS Web.UI components or follow @wemakesitesnet on Twitter.

Related Posts