Angular: Open, Display and modify XML file from client side

Question

Upon 'open' in my menu bar:

1. user can select an xml file from the PC (client side)

2. xml file is converted to json. The data from the json stream is used to set values is several input controls.

3. user can update data in the input controls and save the data (with 'save' in the menu) in the same xml file.

Is step 2 possible without uploading the file to the server ? How ?

Is step 3 possible ? How ?

I'm not interested in doing tricky stuff.

Thank you,

Zvika

Answer 1

As I understood your problem. here you can use xml-js

Refer Demo

Code Segment

Demo Xml

<?xml version="1.0"?>
<Company>
  <Employee>
      <FirstName>Jorge</FirstName>
      <LastName>Linkon</LastName>
      <ContactNo>1234567890</ContactNo>
      <Email>Jorge@linkon.com</Email>
      <Address>
           <City>Florida</City>
           <State>US</State>
           <Zip>123456</Zip>
      </Address>
  </Employee>
</Company>

configure your component like this:

import { Component, OnInit } from '@angular/core';
import { FormBuilder, FormGroup} from '@angular/forms'
import * as converter from 'xml-js';

@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: [ './app.component.css' ]
})
export class AppComponent implements OnInit {
  formGroup : FormGroup;
  outputXml : any ;
  inputXml : any;

  constructor(private _fb : FormBuilder){
  }

  selectFile(event){
    const reader = new FileReader();
    reader.onload = (e: any) => {
      let xml = e.target.result;
      this.inputXml = xml;
      let result1 = converter.xml2json(xml, {compact: true, spaces: 4});

      const JSONData = JSON.parse(result1);
      this.formGroup.patchValue(JSONData)
        }
    reader.readAsText(event.target.files[0])
  }

  createForm(){
    this.formGroup = this._fb.group({
        _declaration: {
          _attributes: {
            version: "1.0"
          }
        },
      Company : this._fb.group({
        Employee : this._fb.group({
          FirstName : this._fb.group({
            _text : [null]
          }),
          LastName : this._fb.group({
            _text : [null]
          }),
          ContactNo :  this._fb.group({
            _text : [null]
          }),
          Email : this._fb.group({
            _text : [null]
          }),
          Address : this._fb.group({
            City : this._fb.group({
              _text : [null]
            }),
            State : this._fb.group({
              _text : [null]
            }),
            Zip : this._fb.group({
              _text : [null]
            })
          }),

        })
      })
    })
  }

  ngOnInit(){
    this.createForm();
  }
  onSave(){
    const str = JSON.stringify(this.formGroup.value);
    this.outputXml = converter.json2xml(str, {compact: true,spaces: 4});
  }
}