How to fetch and parse XML data in the new UI's (e.g. Notebooks) code tile?

[kalelazic]

I found a public api with XML mock data: https://mocktarget.apigee.net/xml

<root>
  <city>San Jose</city>
  <firstName>John</firstName>
  <lastName>Doe</lastName>
  <state>CA</state>
</root>

would like to fetch and access the data within <city>.

I tried the following, but DOMParser is not defined.

export default async function () {
  const apiUrl = 'https://mocktarget.apigee.net/xml';
  const response = await fetch(apiUrl);
  const result = await response.text()
  let parser = new DOMParser(),
			xmlDoc = parser.parseFromString (result, 'text/xml');
  return xmlDoc.getElementsByTagName ('city');
}

{
  "error": {
    "code": 540,
    "message": "Execution crashed.",
    "details": {
      "logs": "",
      "type": "UNCAUGHT_EXCEPTION",
      "message": "Uncaught (in promise) ReferenceError: DOMParser is not defined",
      "details": {
        "sourceLine": "  let parser = new DOMParser(),",
        "lineNumber": 7,
        "startColumn": 15,
        "stack": "Uncaught (in promise) ReferenceError: DOMParser is not defined\n    at default (script.ts:7:15)\n    at eventLoopTick (script.ts:11:1)"
      }
    }
  }
}

[imsingh]

Hi there

At the moment, DOMParser API isn't supported in the app function. Take a look at the current supported APIs at https://developer.dynatrace.com/reference/javascript-runtime/

However, you can send the full XML document as a text to the frontend and use DOM parser there. Take a look at the following example:

1. App function

export default async function (payload: unknown = undefined) {
  const apiUrl = 'https://mocktarget.apigee.net/xml';
  const response = await fetch(apiUrl);
  const result = await response.text()
  return result;
}

2. Dynatrace App(frontend):

 functions.call('xml-parser') //xml-parser is the name of the function
    .then((result) => result.text())
    .then((result) => {
      let parser = new DOMParser(),
        xmlDoc = parser.parseFromString(result, "text/xml");
      return xmlDoc.getElementsByTagName("city");
    }).then(result => console.log(result[0].textContent)); // San Jose

Let me know if it works!

[kalelazic]

Hi Im! Thanks for the reply.

I tried to apply this inside the existing app Notebooks - in the code tile. 
However, I guess you suggestion rather works for the custom app context.
I could not manage to embed this within the code tile alone.

[imsingh · Accepted solution]

You can also use this tiny xml parser library(https://github.com/TobiasNickel/tXml) in app functions/Notebook. Just copy the code from the github and add it inline in your app function as following:

// tXml code here

// your app function logic
export default async function (payload: unknown = undefined) {
  const apiUrl = 'https://mocktarget.apigee.net/xml';
  const response = await fetch(apiUrl);
  const result = await response.text()
  const parsedData = txml.simplify(txml.parse(result));
  return parsedData.city;
}

This will work, however it isn't a good idea.