JavaScript for Extracting Child Elements from XML

Question

JavaScript for Extracting Child Elements from XML

Below is the XML format I am working with:

<Result>
    <system>
      <STATIC>
       <Tag1>2015-10-29T02:02:38-08:00</Tag1>
       <Tag2>264000000</Tag2>
       <Tag3>32696320</Tag3>
      </STATIC>
    </system>
</Result>

I attempted to parse the child elements using the code below:

 if(window.DOMParser)
 {
        parser=new DOMParser();
        xmlDoc=parser.parseFromString(res,"text/xml");
 }
 else // Internet Explorer
 {
        xmlDoc=new ActiveXObject("Microsoft.XMLDOM");
        xmlDoc.async=false;
        xmlDoc.loadXML(res);
 }

var result=xmlDoc.getElementsByTagName("Result"); // Result child

For the system child, I tried:

var system=result[0].childNodes[0];

However, when I attempted to get the <system> tag's child, an error occurred:

var staticResp=system[0].childNodes[0];

Error : Uncaught TypeError: Cannot read property 'childNodes' of undefined(…)

Could someone please assist me in retrieving the child of the <static> tag and its value using the tag name?

Thank you for the prompt replies.

After receiving the above XML data in an AJAX response, I noticed some special characters like 
 after the system tag.

It seems that the proposed solutions may not work for my case.

Can anyone offer assistance on how to ignore these special characters and successfully parse the string?

Here is the captured XML:

<Result><system>&#13;&#10; <STATIC>&#13;&#10; <Tag1>2015-10-29T02:02:38-08:00</Tag1>&#13;&#10; <Tag2>264000000</Tag2>&#13;&#10; <Tag3>32696320</Tag3></STATIC>&#13;&#10; </system></Result>

javascript xml-parsing

Answer 1

Answer №1

You can utilize the method .getElementsByTagName to retrieve elements by their tag name, eliminating the need for childNodes

var xmlData = 
    '<Result>' + 
    '<system>' + 
    '<STATIC>' +
    '<Tag1>2015-10-29T02:02:38-08:00</Tag1>' +
    '<Tag2>264000000</Tag2>' + 
    '<Tag3>32696320</Tag3>' + 
    '</STATIC>' +
    '</system>' + 
    '</Result>';

var parser = new DOMParser();
var xmlDoc = parser.parseFromString(xmlData, 'text/xml');

var result = xmlDoc.getElementsByTagName('Result');

var static = xmlDoc
  .getElementsByTagName('system')[0]
  .getElementsByTagName('STATIC')[0];

console.log(static.getElementsByTagName('Tag1')[0].innerHTML);
console.log(static.getElementsByTagName('Tag2')[0].innerHTML);
console.log(static.getElementsByTagName('Tag3')[0].innerHTML);

<script src="http://gh-canon.github.io/stack-snippet-console/console.min.js"></script>

Answer 2

You can utilize the method .getElementsByTagName to retrieve elements by their tag name, eliminating the need for childNodes

var xmlData = 
    '<Result>' + 
    '<system>' + 
    '<STATIC>' +
    '<Tag1>2015-10-29T02:02:38-08:00</Tag1>' +
    '<Tag2>264000000</Tag2>' + 
    '<Tag3>32696320</Tag3>' + 
    '</STATIC>' +
    '</system>' + 
    '</Result>';

var parser = new DOMParser();
var xmlDoc = parser.parseFromString(xmlData, 'text/xml');

var result = xmlDoc.getElementsByTagName('Result');

var static = xmlDoc
  .getElementsByTagName('system')[0]
  .getElementsByTagName('STATIC')[0];

console.log(static.getElementsByTagName('Tag1')[0].innerHTML);
console.log(static.getElementsByTagName('Tag2')[0].innerHTML);
console.log(static.getElementsByTagName('Tag3')[0].innerHTML);

<script src="http://gh-canon.github.io/stack-snippet-console/console.min.js"></script>

Answer 3

Answer №2

network consists of a single node rather than an array of nodes. You can attempt accessing it using

var dynamicNode = network.childNodes[0];

Example

Answer 4

network consists of a single node rather than an array of nodes. You can attempt accessing it using

var dynamicNode = network.childNodes[0];

Example

Answer 5

Answer №3

getElementsByTagName() retrieves an HTMLCollection. Here's a way to use it:

var staticResp = doc.getElementsByTagName('STATIC')[0];

var xmlText = '<Result>\
    <system>\
      <STATIC>\
       <Tag1>2015-10-29T02:02:38-08:00</Tag1>\
       <Tag2>264000000</Tag2>\
       <Tag3>32696320</Tag3>\
      </STATIC>\
    </system>\
</Result>';

var parser = new DOMParser();
var doc = parser.parseFromString(xmlText, "application/xml");
var staticResp = doc.getElementsByTagName('STATIC')[0];

for(var i = 0; i < staticResp.children.length; i++){
    snippet.log(staticResp.children.item(i).tagName);
}

<script src="http://tjcrowder.github.io/simple-snippets-console/snippet.js"></script>

Answer 6

getElementsByTagName() retrieves an HTMLCollection. Here's a way to use it:

var staticResp = doc.getElementsByTagName('STATIC')[0];

var xmlText = '<Result>\
    <system>\
      <STATIC>\
       <Tag1>2015-10-29T02:02:38-08:00</Tag1>\
       <Tag2>264000000</Tag2>\
       <Tag3>32696320</Tag3>\
      </STATIC>\
    </system>\
</Result>';

var parser = new DOMParser();
var doc = parser.parseFromString(xmlText, "application/xml");
var staticResp = doc.getElementsByTagName('STATIC')[0];

for(var i = 0; i < staticResp.children.length; i++){
    snippet.log(staticResp.children.item(i).tagName);
}

<script src="http://tjcrowder.github.io/simple-snippets-console/snippet.js"></script>

JavaScript for Extracting Child Elements from XML

Answer №1

Answer №2

Answer №3

Similar questions

making changes to a {{ variable }} within the directive's template

Guide to creating a cryptosystem using a Synchronous Stream Cipher with Vue js

Guide on shifting an element into a different one with the help of jQuery

Keystroke to activate Ant Design Select and start searching

Leverage the power of React by utilizing SVGR to easily integrate SVG files

How can I utilize jQuery to iterate through every anchor tag on an HTML page?

Error: jQuery JSONP syntax error due to missing semicolon before statement

Incorporate several websites into a React application without using iframes

Include dropdown lists for selecting the year, month, and day on a web page

Provide Jquery with a named function for success plus some extra perplexity

Calculate the sum of input values in a JavaScript function with the same class

React Switch not displaying various pages correctly

What is the method for altering the track color on a range slider?

Working with NodeJS: Utilizing object casting with default values and eliminating superfluous

Updating multiple elements in the DOM simultaneously

Utilizing Mongoose's `sava()` method, check if the document exists; if not, create a new

My local requests are being blocked by both Chrome and Firefox

When utilizing the getIntersectionList function, IE 9 may experience a malfunction and cease functioning

Exploring the colors of legend navigation icons in Google Pie charts

Transforming Danish currency into numerical digits effortlessly