I want to insert an element in the xml object Angular 7

Question

I get the response as a json object and I parse an convert it to xml format with the following methods:

my service.js

import { Injectable } from '@angular/core';
import { HttpClient } from '@angular/common/http';
import { map } from 'rxjs/operators';
import * as JsonToXML from 'js2xmlparser';

@Injectable({
  providedIn: 'root'
})

export class ShipmentService {
  baseUrl = "http://localhost:5000/api/shipments/"
  shipment = {};

  constructor(
    private http: HttpClient
  ) {}


  getShipments() {
    return this.http.get(this.baseUrl);
  }

  convertXML(obj) {
    return JsonToXML.parse("shipment", obj);
  }

}

And this is my component.ts where I want to append the new elements into the xml object component.ts

import { Component, OnInit } from '@angular/core';
import { ShipmentService } from 'src/app/services/shipment.service';
import { NgbModal } from '@ng-bootstrap/ng-bootstrap';
import { ShipmentModalComponent } from '../shipment-modal/shipment-modal.component';
import { Router } from '@angular/router';
import { NgxSpinnerService} from 'ngx-spinner';

var convert = require('xml-js');

@Component({
  selector: 'app-tracker',
  templateUrl: './tracker.component.html',
  styleUrls: ['./tracker.component.css']
})
export class TrackerComponent implements OnInit {
  shipments:any = [];
  shipment:any = {};
  modal_on:boolean = false;
  modalcontent:any;
  closeResult = '';
  reference: string;
  xmlShipment = {};

  constructor(
    private shipmentService: ShipmentService,
    private modalService: NgbModal,
    private spinner: NgxSpinnerService,
    private router: Router
  ) {}

  ngOnInit() {
    this.getShipments();
  }

  openModal(content, shipment) {
    // this.modal_on = true;
    this.modalcontent = shipment;
    this.modalService.open(content, {ariaLabelledBy: 'modal-basic-title'});
    this.xmlShipment = this.shipmentService.convertXML(this.modalcontent);

    console.log(this.xmlShipment)
    console.log(this.modalcontent);
  }

  getShipments() {
    this.spinner.show(undefined,{
      type: "square-spin",
      size: "medium",
      bdColor: 'rgba(0,0,0,.5)',
      color: "rgb(5, 5, 80)",
      fullScreen: false

    });
    this.shipmentService.getShipments().subscribe(response => {

      this.shipments = response;
      this.spinner.hide();

      console.log(response);
    }, error => {  
      console.log(error);
    });

  }

}

And this is the output of the original xml object

<?xml version='1.0'?>
<shipment>
    <id>1</id>
    <vortex_Reference>123456</vortex_Reference>
    <master_Bill/>
    <house_Bill_of_Lading>123456</house_Bill_of_Lading>
    <actual_Pickup>2019-05-22T00:00:00</actual_Pickup>
    <actual_Departure>2019-05-22T00:00:00</actual_Departure>
    <actual_Arrival>1900-01-01T00:00:00</actual_Arrival>
    <actual_Delivery>1900-01-01T00:00:00</actual_Delivery>
</shipment>

For now I just want to be able to append the new elements into the xml object and be able to console.log it once its changed.

I was thinking that if I could convert the object into a string, access the string in the index/node where I want to append the new value and make the string length longer that way I can shift every node after the new one, move one index upwards.

Any help will be greatly appreciated.

EDIT:

I changed the json object first and then ran the xmlparser function.

by doing:

this.modalcontent = {...this.modalcontent, test: "this is a test"}

and the new xml looks like this:

<?xml version='1.0'?>
<shipment>
    <id>1</id>
    <vortex_Reference>123456</vortex_Reference>
    <master_Bill/>
    <house_Bill_of_Lading>123456</house_Bill_of_Lading>
    <actual_Pickup>2019-05-22T00:00:00</actual_Pickup>
    <actual_Departure>1900-01-01T00:00:00</actual_Departure>
    <actual_Arrival>1900-01-01T00:00:00</actual_Arrival>
    <actual_Delivery>1900-01-01T00:00:00</actual_Delivery>
    <test>this is a test</test>
</shipment>