Home / Questions / 418878
Accepted
Jose Dario Correa
Asked: 2022-01-07 07:15:42 +0800 CST 2022-01-07 07:15:42 +0800 CST

'childNodes' of undefined when traversing XML with jQuery

  • 772

When making an Ajax request, the response I get is an XML like the following:

<wp_ajax>
    <response action="add-tag_0">
        <taxonomy id="0" position="1">
            <response_data/>
            <supplemental>
                <parents></parents>
                <noparents/>
            </supplemental>
        </taxonomy>
    </response>
    <response action="add-tag_0">
        <term id="0" position="0">
            <response_data/>
            <supplemental>
                <term_id>514</term_id>
                <name>Juan Lopez</name>
                <slug>juan-lopez</slug>
                <term_group>0</term_group>
                <term_taxonomy_id>514</term_taxonomy_id>
                <taxonomy>booked_custom_calendars</taxonomy>
                <description><p>[email protected]</p></description>
                <parent>0</parent>
                <count>0</count>
                <filter>display</filter>
            </supplemental>
        </term>
    </response>
</wp_ajax>

I run it as follows:

jQuery(xml).find('response').each(function(i) {
    var term_id = ((xml.getElementsByTagName('term_id')[i]).childNodes[0]).nodeValue;
    jQuery('#esb_subfield_cus_field_calendario').val('[booked-calendar calendar='+ term_id +']');
});

But it throws me the following error:Cannot read property 'childNodes' of undefined

Of so many ways that I found to go through the XML, this was the one that worked for me but it throws me the error and all the JS that follows does not execute. It should be clarified that the Script is executed and performs the function but, as I say, it returns the error and all the JS that follows is not executed.

javascript

1 Answers

  1. Best Answer

    Your error is a simple validation problem.

    You are iterating the number of times that the element exists response, that is, in the XML of your example you would iterate twice having the indexes 0and 1, but when trying to capture the element term_idin the index 0said element does not exist, that is why it takes the mistake.

    The solution is simple, before capturing the value of the element term_idyou must validate that it actually exists.

    In the example I made a parseoso it could work, ignore those settings.

    var xml = '<wp_ajax>\
    <response action="add-tag_0">\
        <taxonomy id="0" position="1">\
            <response_data/>\
            <supplemental>\
                <parents></parents>\
                <noparents/>\
            </supplemental>\
        </taxonomy>\
    </response>\
    <response action="add-tag_0">\
        <term id="0" position="0">\
            <response_data/>\
            <supplemental>\
                <term_id>514</term_id>\
                <name>Juan Lopez</name>\
                <slug>juan-lopez</slug>\
                <term_group>0</term_group>\
                <term_taxonomy_id>514</term_taxonomy_id>\
                <taxonomy>booked_custom_calendars</taxonomy>\
                <description><p>[email protected]</p></description>\
                <parent>0</parent>\
                <count>0</count>\
                <filter>display</filter>\
            </supplemental>\
        </term>\
    </response>\
</wp_ajax>';

parser = new DOMParser();
xmlDoc = parser.parseFromString(xml,"text/xml");

jQuery(xmlDoc).find('response').each(function(i) {
  if(((xmlDoc.getElementsByTagName('term_id')[i])) != undefined){
    var term_id = ((xmlDoc.getElementsByTagName('term_id')[i]).childNodes[0]).nodeValue;
    jQuery('#esb_subfield_cus_field_calendario').val('[booked-calendar calendar='+ term_id +']');
  }
});
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<input type="text" id="esb_subfield_cus_field_calendario" />

    • 1