Tag Archives: XML

HTML5, CSS3 and JavaScript Experiments and Insight Website

Try Semtex – the new HTML5, CSS3 and JavaScript UI framework!

I am pleased to announce that I’ve just finished my latest endeavour – HTML5, CSS3 and JavaScript Experiments and Insight, and most of the code samples and demos from my blog have been moved there in and new and convenient code-listing and demo form. From now on, each new blog post will be accompanied by a dedicated page on that website on which my readers will be able to have a look at the code, run the example and eventually download it.

Enjoy HTML5, CSS3 and JavaScript Experiments and Insight and have a great rest of the week!

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:

<script src="AcidJs.XmlToJson/Scripts/AcidJs.XmlToJson.js"></script>

 

(function() {
    window.xmltojson = new AcidJs.XmlToJson();
})();

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:

<script src="Scripts/AcidJs.XmlToJson/Scripts/AcidJs.XmlToJson.js"></script>

 

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

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):

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
    }
});

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)

window.xmltojson.getLocalData("slayer");

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

window.xmltojson.deleteData(["slayer", "rss", "feedburner"]);

Examples

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

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);
    }
});

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

window.xmltojson.getRemoteData({
    name: "feedburner",
    url: "http://feeds.feedburner.com/acidmartin",
    success: function(data) {
        console.log(data.json);
    }
});

Parse Sitemap File

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

Using XmlToJson

Related Posts

Acid.RSS – Fully customizable RSS publisher, reader, editor and parser

Acid.RSS is a complete all-in-one suite for RSS authoring, publishing and syndication for your website. It features seamless and fully localizable AJAX driven admin panel with WYSIWYG editor, item sorting via drag and drop and friendly system messages. And that’s not all…

The public side of the component is fully customizable and comes with 12 cool looking Web 2.0 skins that will virtually fit any design. Despite of its rich functionality, Acid.RSS is extremely fast even with big feed files and is very small in footprint.

Key Features

  • Crossbrowser WYSIWYG news editor in the admin.
  • Fully AJAX driven.
  • Easy installation, setup and customization.
  • News items in the admin can be rearranged via drag and drop.
  • 12 cool CSS3 skins cool Web 2.0 looks.
  • Internet Explorer 9 ready.
  • Optional CSS3 styling for Internet Explorer 7-8.
  • Fully customizable public page – you choose what to display.
  • User defined default number of shown items on the public page.
  • Cool animations on the public page and in the admin.
  • Friendly system messages and confirmations in the admin panel.
  • Fully localizable and easy to use admin panel.
  • Small footprint.

Visit the home page for Acid.RSS for detailed information, demo, screenshots and download. The component is included in the latest version of Acid.JS Web 2.0 Component Library as well.

Acid.JS 2.8 is Out

Get most of the website widgets and tools I’m developing in a single package that is regularly updated. Whenever a new script or script update is available, it will be included in the download file. To stay informed and up-to-date with Acid.JS, please, subscribe to my RSS feed.

Download the latest version of Acid.JS

Acid.JS 2.7 is Out

Get most of the website widgets and tools I’m developing in a single package that is regularly updated. Whenever a new script or script update is available, it will be included in the download file. To stay informed and up-to-date with Acid.JS, please, subscribe to my RSS feed.

Download the latest version of Acid.JS