Read XML Data In Vue JS

Introduction:

A markup language used for defining markup languages, XML is based on Standard Generalized Markup Language (SGML). The main purpose of XML is to produce data formats that are used to encapsulate data for records in databases, transactions, and many other sorts of data.

In this article, we will learn how to read the data from the XML format using  xml2js  package.

Get started:

Step 1: Set up your Vue project.

Goto your desired folder location and run the following command to create a new Vue project.

vue create read-xml

It will take some time. After creating the project, change your directory by

cd read-xml

then running the following command to check project is successfully established or not.

npm run serve

Step 2: Add dependencies.

Install bootstrap for styling…

npm install bootstrap

Install xml2js and timers for read an XML

npm install --save xml2js
npm install timers

Step 3: Add following HTML in the <template> tag.

<template>
  <div class="container p-4">
    <table class="table table-bordered table-hover">
      <thead>
        <tr>
          <th>Id</th>
          <th>Name</th>
          <th>Address</th>
        </tr>
      </thead>
      <tbody>
        <tr v-for="item in xmlItems" :key="item.id">
          <td>{{item.id}}</td>
          <td>{{item.name}}</td>
          <td>{{item.address}}</td>
        </tr>
      </tbody>
    </table>
  </div>
</template>

Step 4: Add following code in your <script> tag.

<script>
import "bootstrap/dist/css/bootstrap.min.css";
import xml2js from 'xml2js';
export default {
  name: 'HelloWorld',
  mounted() {
    this.parseXML(this.xmlData).then((data) => {
      this.xmlItems = data;
    });
  },
  methods: {
    //xml parsing
    parseXML(data) {
      return new Promise(resolve => {
        var k = "";
        var arr = [],
          parser = new xml2js.Parser(
            {
              trim: true,
              explicitArray: true
            });
        parser.parseString(data, function (err, result) {
          var obj = result.Employee;
          for (k in obj.emp) {
            var item = obj.emp[k];
            arr.push({
              id: item.id[0],
              name: item.name[0],
              address: item.address[0],
            });
          }
          resolve(arr);
        });
      });
    }
  },
  data: function () {
    return {
      xmlItems: [],
      //Dummy xml data.
      xmlData:
        `<?xml version="1.0" encoding="UTF-8"?>    
          <Employee>    
            <emp>    
                <id>1001</id>    
                <name>Rahul</name>    
                <address>Vapi</address>    
            </emp>    
            <emp>    
                <id>1002</id>    
                <name>Dev</name>    
                <address>Surat</address>    
            </emp>    
            <emp>    
                <id>1003</id>    
                <name>Ajay</name>    
                <address>Valsad</address>    
            </emp>    
            <emp>    
                <id>1004</id>    
                <name>Rekha</name>    
                <address>Mumbai</address>    
            </emp>    
            <emp>    
                <id>1005</id>    
                <name>Sanjay</name>       
                <address>Surat</address>    
            </emp>    
          </Employee> `
    }
  }
}
</script>

Finally, save your file and check on the browser.