Display soap response Angular

Question

How do I display SOAP responses in an Angular client side application? The request is sent through a Nodejs server below. I am receiving a response in the console. I want to display the response on the front-end. How do I display certain/all fields in the angular front end? For example. I want to display the Transaction number from the response. How will I retrieve that value from the response and display it on the front end?

app.js

app.get("/api/transunion", (req, res) => {

var base64tag = CryptoJS.enc.Base64.stringify(hashtag);

var soapRequest = `<soap:Envelope xmlns:soap="http://www.w3.org/2003/05/soap-envelope" xmlns:typ="http://autoinsight.transunion.co.za/types">
    <soap:Header/>
        <soap:Body>
                <typ:GetConvergedDataRequest xmlns="http://autoinsight.transunion.co.za/types" xmlns:i="http://www.w3.org/2001/XMLSchema-instance">
                  <typ:ApiKey>96C0C1D2-1278-4C26-AC52-78B287708AC3</typ:ApiKey>
                  <typ:ReportCode>A4B4AC82-2F2F-4A4B-AFF4-2BE2E35238D1</typ:ReportCode>
                  <typ:Input i:type="HPIReportRequest">
                    <typ:SubscriptionUsername></typ:SubscriptionUsername>
                    <typ:SubscriptionPassword></typ:SubscriptionPassword>
                    <typ:VehicleMMCode>46620030</typ:VehicleMMCode>
                    <typ:VehicleManufactureYear>2014</typ:VehicleManufactureYear>
                    <typ:ClientReference>BryteSA</typ:ClientReference>
                    <typ:RequestorPerson></typ:RequestorPerson>
                    <typ:GuideYear>2020</typ:GuideYear>
                    <typ:GuideMonth>4</typ:GuideMonth>
                    <typ:VehicleMileage>0</typ:VehicleMileage>
                  </typ:Input>
                </typ:GetConvergedDataRequest>
          </soap:Body>
      </soap:Envelope>`;

      request.post({
        uri: url,
        form: soapRequest,
        headers: {"request-hash": base64tag}
      }, function(err, response, body){
        console.log(body);
        console.log(response.statusCode);
        parseString(body, function(err, result){
          if(err){
            console.log("ERROR: " + err);
          }
          console.log(result);
          res.send(result);
        });
      });});

Client Side

component.ts file

import { Component, OnInit } from '@angular/core';
import { HttpClient } from "@angular/common/http";
import * as converter from 'xml-js';

@Component({
  selector: 'app-vehicle-details',
  templateUrl: './vehicle-details.component.html',
  styleUrls: ['./vehicle-details.component.css']
})
export class VehicleDetailsComponent implements OnInit {

  data: any;
  TransactionNumber: any;
  EstimatedRetailPrice: any;

  constructor(private http: HttpClient) { }

  ngOnInit() {
    this.http.get('http://localhost:3000/api/tu', {responseType: 'text' })
        .subscribe((resData: any) => {
          let result1 = converter.xml2json(resData.toString(), {compact: true, spaces: 4});
          const JSONData = JSON.parse(result1);
          this.data = JSONData;
          this.TransactionNumber = JSONData.TransactionNumber;
          this.EstimatedRetailPrice = JSONData.EstimatedRetailPrice;
          console.log(this.TransactionNumber);
        });
  }
}

JSON Response

  {
       "_declaration":{
          "_attributes":{
             "version":"1.0",
             "encoding":"utf-8"
          }
       },
       "s:Envelope":{
          "_attributes":{
             "xmlns:s":"http://www.w3.org/2003/05/soap-envelope"
          },
          "s:Body":{
             "GetConvergedDataRequestResponse":{
                "_attributes":{
                   "xmlns:i":"http://www.w3.org/2001/XMLSchema-instance",
                   "xmlns":"http://autoinsight.transunion.co.za/types"
                },
                "ConvergedData":{
                   "_attributes":{
                      "xmlns:d4p1":"http://schemas.datacontract.org/2004/07/Transunion.Auto.Convergence.B2B.BusinessModels",
                      "i:type":"d4p1:ConvergedResults"
                   },
                   "d4p1:AccidentHistory":{
                      "_attributes":{
                         "i:nil":"true"
                      }
                   },
                   "d4p1:TransactionNumber":{
                      "_text":"64326668"
                   },
                   "d4p1:ValidationMessages":{
                      "_attributes":{
                         "xmlns:d5p1":"http://schemas.microsoft.com/2003/10/Serialization/Arrays"
                      }
                   },
                   "d4p1:VehicleCodeAndDescptionInfo":{
                      "d4p1:VehicleCodeAndDescription":{
                         "d4p1:ResultCode":{
                            "_attributes":{
                               "i:nil":"true"
                            }
                         },
                         "d4p1:ResultCodeDescription":{
                            "_attributes":{
                               "i:nil":"true"
                            }
                         },
                         "d4p1:VehicleCode":{
                            "_text":"46620030"
                         },
                         "d4p1:VehicleTypeCode":{
                            "_text":"T"
                         },
                         "d4p1:VehicleTypeDescription":{
                            "_text":"Agricultural"
                         },
                         "d4p1:VehicleMake":{
                            "_text":"NEW HOLLAND"
                         },
                         "d4p1:VehicleModel":{
                            "_text":"TT TN"
                         },
                         "d4p1:VehicleVariant":{
                            "_text":"TT 55 E / T DT"
                         },
                         "d4p1:IntroductionDate":{
                            "_text":"2010-03-15T00:00:00"
                         }
                },
                "ReportUrl":{
                   "_text":"https:\\\\autotest.transunion.co.za/ReportApi/apireport/270c70e5-7d6d-407f-adc1-71974faec7df"
                },
                "ResponseStatus":{
                   "_attributes":{
                      "xmlns:d4p1":"http://schemas.servicestack.net/types",
                      "i:nil":"true"
                   }
                }
             }
          }
       }
    }

Answer 1

You need to bind response's fields to component members, through Angular binding.

In your Angular component, for example :

• Create a new member :

subscriptionUsername: string member

• In your subscribe() use a SOAP NPM library to parse the SOAP response, then :

this.subscriptionUsername = soapData.subscriptionUsername

• In your view, then you can :

  Received {{ subscriptionUsername | async }}