Skip to content

Instantly share code, notes, and snippets.

@benvium
Last active June 4, 2020 05:22
Show Gist options
  • Star 6 You must be signed in to star a gist
  • Fork 1 You must be signed in to fork a gist
  • Save benvium/7398ef1bab7a5b448608 to your computer and use it in GitHub Desktop.
Save benvium/7398ef1bab7a5b448608 to your computer and use it in GitHub Desktop.
Parse XML Example using React Native.xmldom is a pure JavaScript implementation of an XML Parser. I've added it to window so that browser modules that require it will work. Tested on iOS and Android.
/**
*
* Before use, type:
* ```
* npm install xmldom --save
* ```
*/
window.DOMParser = require('xmldom').DOMParser;
const exampleParse = ()=> {
const text = `<bookstore>
<book category="cooking">
<title lang="en">Everyday Italian</title>
<author>Giada De Laurentiis</author>
<year>2005</year>
<price>30.00</price> </book>
<book category="children">
<title lang="en">Harry Potter</title>
<author>J K. Rowling</author>
<year>2005</year>
<price>29.99</price> </book>
<book category="web">
<title lang="en">XQuery Kick Start</title>
<author>James McGovern</author>
<author>Per Bothner</author>
<author>Kurt Cagle</author>
<author>James Linn</author>
<author>Vaidyanathan Nagarajan</author>
<year>2003</year>
<price>49.99</price> </book>
<book category="web" cover="paperback">
<title lang="en">Learning XML</title>
<author>Erik T. Ray</author>
<year>2003</year>
<price>39.95</price> </book>
</bookstore>`;
const parser = new DOMParser();
const xmlDoc = parser.parseFromString(text);
console.log("XmlTest.exampleParse " + xmlDoc.getElementsByTagName("title")[0].childNodes[0].nodeValue);
};
module.exports = exampleParse
@frankbolviken
Copy link

Hi,

Does this work on latest react-native for you?
When I try to require the component, I get this error:

SyntaxError: Strict mode does not allow function declarations in a lexically nested statement.

@frankbolviken
Copy link

Was solved by adding node_modules/xmldom in a .babelignore file

@cooperka
Copy link

cooperka commented Oct 3, 2016

This is a great example @benvium, thanks. FYI I don't seem to need to set window.DOMParser; it works out of the box for me on both Android and iOS.

@RapsIn4
Copy link

RapsIn4 commented Mar 23, 2017

Thanks for the gist!

@SkyzohKey
Copy link

Copy link

ghost commented Dec 25, 2019

Congratulations, benvium, for your solution.

I already a lot of search one clean solution and one effective code, however your code was the only one that run with sucess (internet and others foruns). I get up this alert to all the programers that how me, spent a long time searching a real solution that works.

Attention all the programers, i am using NodeJS 10.13 and the WebService was development using .NET 4.5.1 C # WCF ASMX. Below there are one slice from my code to help all the programers, that passed many time searching one effective solution:

This is inside the file React Native App.js, lets go:

componentDidMount() {

    axios.get('http://adresswebservice.net/Service.asmx/getMethod?nmEmail=xxxx@www.com')
    .then(response => {   
         
    var xmlBase = '<?xml version="1.0" encoding="UTF-8" ?><business><company>Code Blog</company><owner>Nic Raboy</owner><employee><firstname>Nic</firstname><lastname>Raboy</lastname></employee><employee><firstname>Maria</firstname><lastname>Campos</lastname></employee></business>';
    var XMLParser = require('react-xml-parser');
    var xml = new XMLParser().parseFromString(xmlBase); 
    
    window.DOMParser = require('xmldom').DOMParser;
    const parser = new DOMParser();
    const xmlDoc = parser.parseFromString(xmlBase);    
    Alert.alert('CHILD XML: '+xmlDoc.getElementsByTagName("company")[0].childNodes[0].nodeValue);

    })
    .catch(error => {      
      console.log(error);
    });
  } 

PS: The xmlBase need completed with your result request webservice

The result was the XML child value: Code Blog

Have a nice day and merry christmas.

Willy Thorpe

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment