Upon 'open' in my menu bar:
user can select an xml file from the PC (client side)
xml file is converted to json. The data from the json stream is used to set values is several input controls.
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
As I understood your problem. here you can use xml-js
Code Segment
Demo Xml
<?xml version="1.0"?>
<Company>
<Employee>
<FirstName>Jorge</FirstName>
<LastName>Linkon</LastName>
<ContactNo>1234567890</ContactNo>
<Email>[email protected]</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});
}
}
