Question

I have multiple xml files that I am trying to parse using JQuery. So far, I’ve only found success by parsing each file individually. I’m new at this and my code is very long and repetitive. I’d appreciate any help scaling it down. Here is my js:

$.ajax({
    type: "GET",
    url: "docs/doc1.xml",
    dataType: "xml",
    success: parseXml1
});

$.ajax({
    type: "GET",
    url: "docs/doc2.xml",
    dataType: "xml",
    success: parseXml2
});
$.ajax({
    type: "GET",
    url: "docs/doc3.xml",
    dataType: "xml",
    success: parseXml3
});
function parseXml1(xml){
    var gen = $(xml).find("subsystem").eq(0);
    var title = gen.find("title").text();
    var text = gen.find("text").text();
    $("#Title01").html(title);
    $("#Text01").html(text);
};

function parseXml2(xml){
    var gen = $(xml).find("subsystem").eq(0);
    var title = gen.find("title").text();
    var text = gen.find("text").text();
    $("#Title02").html(title);
    $("#Text02").html(text);

    var sys = $(xml).find("subsystem").eq(1);
    var title = sys.find("title").text();
    var text = sys.find("text").text();
    $("#Title02-1").html(title);
    $("#Text02-1").html(text);
};

function parseXml3(xml){
    var gen = $(xml).find("subsystem").eq(0);
    var title = gen.find("title").text();
    var text = gen.find("text").text();
    $("#Title03").html(title);
    $("#Text03").html(text);

    var sys = $(xml).find("subsystem").eq(1);
    var title = sys.find("title").text();
    var text = sys.find("text").text();
    $("#Title03-1").html(title);
    $("#Text03-1").html(text);
};

And my xml is set up as follows:

<root>
   <subsystem>This is information 1</subsystem>
   <subsystem>This is information 2</subsystem>
</root>

So I have multiple nodes with no attributes that I am trying to access one by one within each xml file. Then, I am trying to put that text into a div on my HTML page. There has to be a better way to do this.

Answer 1

Make it a function call

function parseFile( path, titleId, textId) {

    function parseXml(xml){
        var subSystems = $(xml).find("subsystem");
        var gen = subSystems.eq(0);
        var title = gen.find("title").text();
        var text = gen.find("text").text();
        $("#" + titleId).html(title);
        $("#" + textId).html(text);
        if ( subSystems.length===2 ) {
            var sys = subSystems.eq(1);
            var title = sys.find("title").text();
            var text = sys.find("text").text();
            $("#" + titleId + "-1").html(title);
            $("#" + textId + "-1").html(text);
        }
    };

    $.ajax({
        type: "GET",
        url: path,
        dataType: "xml",
        success: parseXml
    });
}

parseFile("docs/doc1.xml", "Title01", "Text01");
parseFile("docs/doc2.xml", "Title02", "Text02");
parseFile("docs/doc3.xml", "Title03", "Text03");

and you can make it smaller, by getting rid of that if check and doing a loop

function parseFile( path, titleId, textId) {

    function parseXml(xml){

        $(xml).find("subsystem").each( 
            function(ind) {
                var gen = jQuery(this);
                var title = gen.find("title").text();
                var text = gen.find("text").text();
                var ext = ind===0 ? "" : "-" + ind;
                $("#" + titleId + ext).html(title);
                $("#" + textId + ext).html(text);
            }
        );
    };

    $.ajax({
        type: "GET",
        url: path,
        dataType: "xml",
        success: parseXml
    });
}

parseFile("docs/doc1.xml", "Title01", "Text01");
parseFile("docs/doc2.xml", "Title02", "Text02");
parseFile("docs/doc3.xml", "Title03", "Text03");