Reactnative Convert Rss Feed to Xml
Fetch and Populate XML Data in React Native
Introduction
XML (Extensible Markup Language) is one of the famous formats for encoding documents and data using markup tags. XML wraps every piece of data inside specific customized key tags with values:
1 < person > 2 < fname > Pavneet </ fname > <!--first name--> 3 < lname > Singh </ lname > <!--last name--> 4 </ person > XML
XML documents are widely used in Android to create UI layouts, which can be used to provide native interface support via native modules in React Native. XML is also the only supported data transfer format for APIs that are built using SOAP protocol.
This guide provides the implementation details to download and parse XML documents in React Native.
Installing Dependencies
The basic requirements to implement an API request can be categorized into three key steps: data source, network API module, and parsing API module (optional):
Set Up Data Source
The first step is to set up a mock XML response data, which can be done easily by creating a GitHub gist. Create a gist with one XML response file like this.
- A gist can be copied and used with any GitHub account. Any change in a gist file will produce a new raw URL.
Network Module
React Native provides an inbuilt fetch API to make network calls so there is no need to install any other dependencies. Alternatively, there are other HTTP clients also available, like XMLHttpRequest (inbuilt), Frisbee , axios , superagent , and request .
Parsing Module
React Native doesn't offer any inbuilt modules for parsing XML data, so fast-xml-parser will be used to parse XML response. Install it as a dependency:
1 npm install fast-xml-parser typescript sh
The
typescriptpackage is required to fix the type warning.
There are many other third-party solutions available but they have some drawbacks:
-
xml2jsis one of the popular library for parsing XML but it requires additional dependencies (event, timer, etc.) to work with React Native. -
jsdomis a fully featured DOM creation and parsing lib, mostly suitable for DOM manipulation. -
xmldomis a W3C standard based paring library, but at the time of this writing it didn't work well with comments, and gives warnings for unclosed tags due to XML comments.
Also, there are some React Native-specific libraries available:
- react-native-xml2js is a React library specifically modified for React Native. It's no longer being maintained, but it can be used as a last resort.
- react-xml-parser is a lightweight XML parser, but it's limited to the
getElementsByTagfunction and does not work well with XML comments.
Downloading XML Response
To download the XML data from a gist, copy the raw URL of the GitHub gist by right-clicking on the raw button and copy the link:
A fetch API call can simply be executed by using fetch(input: RequestInfo) where RequestInfo can be a string URL:
1 fetch ( 'https://gist.githubusercontent.com/Pavneet-Sing/d0f3324f2cd3244a6ac8ffc5e8550102/raw/8ebc801b3e4d4987590958978ae58d3f931193a3/XMLResponse.xml' ) 2 . then ( ( response ) => response . text ( ) ) 3 . then ( ( textResponse ) => console . log ( 'response is ' , textResponse ) ) 4 . catch ( ( error ) => { 5 console . log ( error ) ; 6 } ) ; JSX
The above fetch call will return a Promise that is combined with a then call to process the asynchronous response. The text() function call also returns the Promise object that is combined with another then function to log the text response. The above code can be simplified using async/await :
1 async getXMLResponse ( ) { 2 const response = await fetch ( 'https://gist.githubusercontent.com/Pavneet-Sing/3a69eb13677eba270264579bf0aa2121/raw/8a7cddd4c4dad77ba09f9e59e97b87cc04cf09fa/ParseXMLResponse.xml' ) 3 console . log ( 'response is' , await response . text ( ) ) ; 4 } JSX
async/awaitdo not handle errors, so atry/catchblock should be used to handle any potential errors from anawaitexecution.
Parsing XML Data
The fast-xml-parser library provides a convenient way to parse the string XML response using the parse function. The parse function will convert the XML response text into a JSON object, which allows direct access to the properties of a parsed JSON object to get the data:
1 import { parse } from 'fast-xml-parser' ; 2 3 getXMLResponse = ( ) => { 4 fetch ( 'https://gist.githubusercontent.com/Pavneet-Sing/d0f3324f2cd3244a6ac8ffc5e8550102/raw/8ebc801b3e4d4987590958978ae58d3f931193a3/XMLResponse.xml' ) 5 . then ( ( response ) => response . text ( ) ) 6 . then ( ( textResponse ) => { 7 let obj = parse ( textResponse ) ; 8 let fname = obj . person . fname ; 9 let lname = obj . person . lname ; 10 let phone = obj . person . contacts . personal . phone ; 11 this . setState ( { fname : fname , lname : lname , phone : phone } ) 12 } ) 13 . catch ( ( error ) => { 14 console . log ( error ) ; 15 } ) ; 16 } JSX
The parse(textResponse) function call will convert the XML text response to an object, and the data will be extracted using the properties' names like obj.person.fname . The parsed data is being stored in the state using setState function to display the response on the UI. The optimized React Native code to display the data on the UI is available on my RNParseXML repository.
Conclusion
Parsing XML into a JSON object offers great flexibility to access the data directly with properties. Objects can easily be traversed to parse nested arrays or objects. React Native offers many inbuilt React APIs (like fetch , async/await , etc.) but does not support all the React libraries, so it's recommended to always test the implementation on Android and iOS platforms. Happy coding!
Source: https://www.pluralsight.com/guides/fetch-and-populate-xml-data-in-react-native
0 Response to "Reactnative Convert Rss Feed to Xml"
Post a Comment