Is this the fastest way to parse my XML into JavaScript objects using jQuery?

Question

I have an XML file like this:

<content>
    <box>
        <var1>A1</var1>
        <var2>B1</var2>
        <var3>C1</var3>
        <var4>D1</var4>
    </box>
    <box>
        <var1>A2</var1>
        <var2>B2</var2>
        <var3>C2</var3>
        <var4>D2</var4>
    </box>
    <box>
        <var1>A3</var1>
        <var2>B3</var2>
        <var3>C3</var3>
        <var4>D3</var4>
    </box>
</content>

It has 500 box elements which I need to parse into JavaScript objects. I am using this code which works fine but I am a newbie and maybe I am missing something and would like to get suggestions if there is a better/faster way to do it:

var app = {
    //...
    box: [],

    init: function (file) {
        var that = this;

        $.ajax({
            type: "GET",
            url: file,
            dataType: "xml",
            success: function (xml) {
                $("box", xml).each(function (i) {
                    var e = $(this);
                    that.box[i] = new Box(i, {
                        var1: e.children("var1").text(),
                        var2: e.children("var2").text(),
                        var3: e.children("var3").text(),
                        var4: e.children("var4").text()
                    });
                });
            }
        });
    },
    //...
};

Thanks in advance.

Duncan_m · Accepted Answer · 2011-01-19 02:32:26Z

3

I have an XML source I am forced to use.. I convert it to JSON on the client side and then load it.. much easier..

Tracker.loadCasesFromServer = function () {
$.ajax({
    type: 'GET',
    url: '/WAITING.CASES.XML',
    dataType: 'xml',
    success: function (data) {
            Tracker.cases = jQuery.parseJSON(xml2json(data, ""));
            Tracker.loadCasesToMap();
        },
        data: {},
        async: true
    });

};

Used the XML2JSON converter that can be found here: http://www.thomasfrank.se/xml_to_json.html

Duncan

answered Jan 19, 2011 at 2:32

Duncan_m

2,5462 gold badges21 silver badges19 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

VerizonW Over a year ago

Thanks, but I think this means doing an extra step and there would be no performance gains because the xml2json function is probably doing something very similar to my method. Maybe parsing the XML into JSON on the server would be a better idea???

Brian Donovan · Accepted Answer · 2011-01-19 17:46:19Z

2

Use JSON if at all possible. That way the browser will do the parsing for you and you won't have to do any post-processing.

JSON from the server

{"content":
  {"box": [
    {"var1": "A1",
     "var2": "B1",
     "var3": "C1",
     "var4": "D1"},
    {"var1": "A2",
     "var2": "B2",
     "var3": "C2",
     "var4": "D2"},
    {"var1": "A3",
     "var2": "B3",
     "var3": "C3",
     "var4": "D3"}]}}

Client JavaScript

var app = {
    //...
    box: [],

    init: function (file) {
        var that = this;

        $.ajax({
            type: "GET",
            url: file,
            dataType: "json",
            success: function(result) {
              that.box = $.map(result.content.box, function(box, i) {
                return new Box(i, box);
              });
            }
        });
    },
    //...
};

edited Jan 19, 2011 at 17:46

answered Jan 19, 2011 at 2:30

Brian Donovan

8,4101 gold badge28 silver badges25 bronze badges

5 Comments

VerizonW Over a year ago

This looks great, but then how could I add methods to the prototype of the created box objects?

Walter Mundt Over a year ago

You could use a for...in loop to copy all the properties from result.content.box into an object with the methods you want (you can do that in a 'constructor' type function if you like). It's not quite as elegant. Alternatively, you could assign all the methods to the JSON result object yourself inside the success function.

Walter Mundt Over a year ago

In other words -- generally, you can't actually give the created box objects a special prototype. Instead, you have to translate the "plain old data" objects the JSON parser gives you into fully-functional versions yourself somehow, or just use them the way they come in more procedural-style code.

Brian Donovan Over a year ago

Ah, I forgot about the Box instance thing. @Walter Mundt is right and I updated my answer to show how you might do it.

VerizonW Over a year ago

This works great, I get the same result as with my previous method but now using JSON, I'll keep both methods and call this initJSON(). Now I have another related question but I think that should go in a new post, thanks!

Amjad Masad · Accepted Answer · 2011-01-19 03:11:15Z

0

You can use browser native XML support which I guess would be fast. However this is varied amongst browsers e.g.(Firefox : DOMParser, IE: XMLDOM ..).

So instead of just going on and manually handling all browsers, you could make use of something like this https://sites.google.com/a/van-steenbeek.net/archive/explorer_domparser_parsefromstring

answered Jan 19, 2011 at 3:11

Amjad Masad

4,0451 gold badge23 silver badges20 bronze badges

2 Comments

VerizonW Over a year ago

Actually I'm already parsing the XML using jQuery which I think is way easier than the native JavaScript DOM methods and handles the browser differences.

Amjad Masad Over a year ago

Well im not sure, but i think JQuery parse XML as regular HTML.. try inserting something like <plaintext></plaintext>, in regular XML this is perfectly ok, parse it with jquery it will think it is the deprecated HTML "plaintext", and your question is about performance, so using the native support is supposed to be faster!! but yet again u never know... You should benchmark for an accurate answer... Cheerz

Collectives™ on Stack Overflow

Is this the fastest way to parse my XML into JavaScript objects using jQuery?

3 Answers 3

1 Comment

5 Comments

2 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

1 Comment

5 Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related