Categories

Saturday, October 16, 2021
therichposts@gmail.com
Bootstrap 5Reactjs

Reactjs Read XML File Data Working Demo

Reactjs Read XML File Data Working Demo

Hello friends, welcome back to my blog. Today in this blog post, I am going to show you, Reactjs Read XML File Data Working Demo.


Working Demo
Reactjs Read XML File Data Working Demo
Reactjs Read XML File Data Working Demo
react xml file
XML File

For reactjs and bootstrap 5 new comers, please check the below links:

Reactjs Basic Tutorials

Bootstrap 5 Tutorials


Friends now I proceed onwards and here is the working code snippet and please use this carefully to avoid the mistakes:

1. Firstly, we need fresh reactjs setup and for that, we need to run below commands into out terminal and also we should have latest node version installed on our system:

npx create-react-app reacttut

cd reacttut

2. Now we need to run below commands into our project terminal to get, axios, xml parser bootstrap(optional) and related modules into our reactjs application:

npm install bootstrap --save

npm i react-xml-parser

npm install axios 

npm start //For start project

3. Finally for the main output, we need to add below code into our reacttut/src/App.js file or if you have fresh setup then you can replace reacttut/src/App.js file code with below code:

import React from 'react';

//bootstrap
import 'bootstrap/dist/css/bootstrap.min.css';

//axios for xml request
import axios from 'axios';

//xml file reader
import XMLParser from 'react-xml-parser';

class App extends React.Component {
  constructor(props) {
    super(props)
      this.state = {
     
        name: [],
      
              }
             
      }
    componentDidMount() {
     //get data request
      axios.get('/assets/users.xml', {
        "Content-Type": "application/xml; charset=utf-8"
       }).then(res => 
        {
        //Storing users detail in state array object
        const jsonDataFromXml = new XMLParser().parseFromString(res.data);
        
      
        this.setState({ name: jsonDataFromXml.getElementsByTagName('name') })
     
       
       
           }); 
    }
 
  render() {
  
    return (
    
      <div className="container p-5">
       
        <ul class="list-group">
      
        {(
      this.state.name.map((item, index) => {
        return (
          <li class="list-group-item">{item.value}</li>
        )
        }
      ))}
    
    </ul>
    </div>
     
)
};
}

export default App;

4. Now we need to create `assests` folder inside public folder and after that we need to create `users.xml` file and add below code into it:

<?xml version="1.0" encoding="UTF-8"?>    
<Employee>    
   <emp>    
         
      <name>Ajay Rich</name>    
     
   </emp>    
   <emp>    
      
      <name>Jassa Rich</name>    
      
   </emp>    
   <emp>    
        
      <name>Jassa</name>    
       
   </emp>    
   <emp>    
      
      <name>Rich Jassa</name>    
       
   </emp>    
   <emp>    
     
      <name>Jassa Boss</name>       
       
   </emp>    
</Employee>    

Now we are done friends. If you have any kind of query or suggestion or any requirement then feel free to comment below.

Note: Friends, I just tell the basic setup and things, you can change the code according to your requirements.

I will appreciate that if you will tell your views for this post. Nothing matters if your views will be good or bad.

Jassa

Thanks

Ajay Malhotra
the authorAjay Malhotra
Hello to all. Welcome to therichpost.com. Myself Ajay Malhotra and I am freelance full stack developer. I love coding. I know WordPress, Core php, Angularjs, Angular 2, Angular 6, Angular 7, Angular 8, Angular 9, Angular 10, Angular 11, Angular12, Bootstrap 5, Nodejs, Laravel, Codeigniter, Shopify, Squarespace, jQuery, Google Map Api, Vuejs, Reactjs, Big commerce etc.

Leave a Reply

This site uses Akismet to reduce spam. Learn how your comment data is processed.