Outputting XML file data in an ionic project

Question

I created a QR/ Barcode scanner in my ionic project by using this online link https://www.freakyjolly.com/ionic-4-add-barcode-qr-code-scanner-encoder-ionic-4-native-plugin/

the qr code is working fine and generating an XML output data of qr code. below is xml out put iam getting.

Barcode data {"text":<?xml version=\"1.0\"encoding=\"UTF-8\"?><PrintLetterBarcodeData name="john" age="36" city="New York" country="USA">}

As in the tutorial link, when i try to output the data into page using code

{{ scannedData["text"] }}

the complete details of qr code which is shown in the xml file is getting displayed. this is because of text keyword used. But i wanto specifically output the name, age or city available in the XML content. please help me how can i do this.

Answer 1

Since we are dealing with angular it would be better if we convert xml to json which makes working with data easy. Use a package called ngx-xml2jsonto

import { Component } from '@angular/core';
import { NgxXml2jsonService } from 'ngx-xml2json';

@Component({
 selector: 'app-root',
 templateUrl: './app.component.html',
 styleUrls: ['./app.component.css']
})

export class AppComponent {
   scannedData = `<?xml version=\"1.0\"encoding=\"UTF-8\"?><PrintLetterBarcodeData name="john" age="36" city="New York" country="USA">`;

   constructor(private ngxXml2jsonService: NgxXml2jsonService) {
    const parser = new DOMParser();
    const xml = parser.parseFromString(this.scannedData, 'text/xml');
    const obj = this.ngxXml2jsonService.xmlToJson(xml);
    console.log(obj); // will get the data as json
   }
 }

Answer 2

you can parse the XML with Javascript DOM like this:

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

And get specific values from the nodes like this:

//Gets house address number
xmlDoc.getElementsByTagName("name")[0].childNodes[0].nodeValue;

//Gets Street name
xmlDoc.getElementsByTagName("age")[0].childNodes[0].nodeValue;

//Gets Postal Code
xmlDoc.getElementsByTagName("city")[0].childNodes[0].nodeValue;

Answer 3

here is working Example

first import

import * as xml2js from 'xml2js';

then sample XML

 const xmlString = `
    <?xml version="1.0" encoding="UTF-8"?>
<PrintLetterBarcodeData name="john" age="36" city="New York" country="USA">
</PrintLetterBarcodeData>
    `;

then convert it

 xml: string;

  convertXMl() {
    const parser = new xml2js.Parser({ strict: false, trim: true });
    parser.parseString(xmlString, (err, result) => {
      this.xml = result;
    });
  }

in Html

<pre>
  {{ xml | json }}
</pre>