Find xml attribute values with javascript

Question

How do I get the attribute value of an XML node with Javascript / jQuery?

I'm trying to get the value of the duration attribute on the node, then get the fixedValue.

<loanAmount>
    <interestRates>
        <interestRate allowInterestOnly="true" type="variable" value="5.82"/>
        <interestRate allowFixed="true" allowInterestOnly="true" duration="1" fixedInterestOnlyValue="5.7" fixedValue="5.7" variableInterestOnlyValue="5.82"/>
        <interestRate allowFixed="true" allowInterestOnly="true" duration="3" fixedInterestOnlyValue="5.75" fixedValue="5.75" variableInterestOnlyValue="5.82"/>
        <interestRate allowFixed="true" allowInterestOnly="true" duration="5" fixedInterestOnlyValue="6.64" fixedValue="6.56" variableInterestOnlyValue="5.82"/>
        <interestRate allowFixed="true" allowInterestOnly="true" duration="10" variableInterestOnlyValue="5.82"/>
    </interestRates>
</loanAmount>'

So far I've got:

var currentLoanRates = function() {
    var currLoanXml = '<loanAmount><interestRates><interestRate allowInterestOnly="true" type="variable" value="5.82"/><interestRate allowFixed="true" allowInterestOnly="true" duration="1" fixedInterestOnlyValue="5.7" fixedValue="5.7" variableInterestOnlyValue="5.82"/><interestRate allowFixed="true" allowInterestOnly="true" duration="3" fixedInterestOnlyValue="5.75" fixedValue="5.75" variableInterestOnlyValue="5.82"/><interestRate allowFixed="true" allowInterestOnly="true" duration="5" fixedInterestOnlyValue="6.64" fixedValue="6.56" variableInterestOnlyValue="5.82"/><interestRate allowFixed="true" allowInterestOnly="true" duration="10" variableInterestOnlyValue="5.82"/></interestRates></loanAmount>',
    xmlDoc = $.parseXML( currLoanXml ),
    $xml = $( xmlDoc ),
    $intRate = $xml.find("interestRate"),
    $varIntRate = $intRate.attr("fixedValue");

    console.log($intRate);
    console.log($varIntRate);
};

The second console.log prints undefined.

Solution 1

The first problem I ran into is that currLoadXml is not a string. It needs to be wrapped inside single quotes.

Try using the below method

var currentLoanRates = function() {
    var currLoanXml = '<loanAmount><interestRates><interestRate allowInterestOnly="true" type="variable" value="5.82"/><interestRate allowFixed="true" allowInterestOnly="true" duration="1" fixedInterestOnlyValue="5.7" fixedValue="5.7" variableInterestOnlyValue="5.82"/><interestRate allowFixed="true" allowInterestOnly="true" duration="3" fixedInterestOnlyValue="5.75" fixedValue="5.75" variableInterestOnlyValue="5.82"/><interestRate allowFixed="true" allowInterestOnly="true" duration="5" fixedInterestOnlyValue="6.64" fixedValue="6.56" variableInterestOnlyValue="5.82"/><interestRate allowFixed="true" allowInterestOnly="true" duration="10" variableInterestOnlyValue="5.82"/></interestRates></loanAmount>',
    xmlDoc = $.parseXML( currLoanXml ),
    $xml = $( xmlDoc ),
    $intRate = $xml.find("interestRate");
    $intRate.each(function(index, element) { 
        if(element.attributes["duration"]) {
            console.log("Duration :" + element.attributes["duration"].value);
        }

        if(element.attributes["fixedValue"]) {
            console.log("Fixed value:" + element.attributes["fixedValue"].value);
        }
    });

};

Solution 2

For those looking out for loading the XML from an external file, this could be of some help:

<script>
    $.ajax({
        url: 'sample.xml',
        dataType: 'xml',
        success: function (data) {
            // Extract relevant data from XML
            var xml_node = $('loanAmount', data);
            $parameter = xml_node.find('interestRate');
            $parameter.each(function (index, element) {
                if (element.attributes["allowFixed"]) {
                    console.log("Allow Fixed : " + element.attributes["allowFixed"].value);
                }

                if (element.attributes["duration"]) {
                    console.log("Duration: " + element.attributes["duration"].value);
                }
            });
        },
        error: function (data) {
            console.log('Error loading XML data');
        }
    });
</script>

Comments

[timmackay]

Thanks Ramesh - this has very much helped put me on the right track.