topic Re: How to fetch and parse XML data in the new UI's (e.g. Notebooks) code tile? in Developer Q&A Forum

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

kalelazic — Fri, 21 Jul 2023 10:32:16 GMT

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)"
      }
    }
  }
}

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

imsingh — Mon, 24 Jul 2023 08:22:29 GMT

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!

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

kalelazic — Mon, 24 Jul 2023 07:55:55 GMT

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.

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

imsingh — Mon, 24 Jul 2023 08:53:18 GMT

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.