DOMParser returning location:null

App Building
,
1

Hi all,

I am new to Retool, but have a reasonable programming and debugging background; very excited with the platform!

I'm at a loss here; I have read several related posts on the forum and elsewhere for DOMParser usage, like:
here
or
here

This seems to work for other Retoolers and looks relatively simple, but I cannot make it work for me.

  • Goal: I am trying to access information from a web site which does not provide an API, so I am retrieving web pages as HMTL that I want to parse into DOM documents that I can manipulate as an object (document.getElementById(), etc.)

  • Steps:

  1. I have defined a simple query resource in the form of a GET http request; I have then defined a query (let's call it testQuery) based on that resource; the query does work as expected, getting the full HTML of the target page. the actual content is returned in testQuery.data.message, and I can see it in the response window. (A and B in screenshot, sensitive contents sanitized)
  2. I have then coded a transformer in order to parse the HTML content. I can console.log the HTML content (in data.message) in the transformer. I also confirm data.message is of type string. (C in screenshot)
  3. I then initialize var myDocument = new DOMParser() object and use the parseFromString method with parameters data.message and type "text/html".
  4. the resulting document always returns {location: null} (D in screenshot)
  5. (I have also tried types "text/xml" and
    "application/xml" with same unsuccessful results)
  6. Although the HTML content is rather long, I am sure it is not corrupt or non compliant, because i can successfully generate a DOM document from this content using DOMParser. parseFromString in the devtools console (second screenshot).

My feeling is the var mydoc = new DOMParser() statement does not initialize the expected object; I have also tried var mydoc = new window.DOMParser() with same unsuccessful results.

Thank you in advance for your time and advice!

  • Screenshots:

image
image1294×604 143 KB

image
image1294×529 165 KB

2 Likes
2

Hi all again,

Partially answering my own question:

While variable mydoc itself returns {location:null}, it DOES seem to contain the DOM document somehow, since I get expected results by accessing something like "mydoc.getElementById("menu_23").innerHTML". I hope this is true for all expected elements in the page.

Obviously, I don't seem to fully understand the expected behaviour of DOMParser, so I would appreciate any advice or pointers to get the full picture.

Thanks in advance!

1 Like
3

Hello @JAMT!

Thank you so much for labeling the screen shots and explaining the situation so well :slightly_smiling_face:

That is very odd that the DOMParser() isn't working is intended, it seems like you did everything right and it should work exactly as outlined in the second link you shared of the blog post about converting XML to a DOM document :thinking:

Let me do some testing and check with our team to see if I can find a solution or the right question to ask.

In response to your second post, it sounds like the your mydoc variable is successfully being created with the the data you needed nested inside.

Have you tried extracting more elements this via in a loop by grabbing all the element IDs and chaining that with your .innerHTML calls?

It looks like from the blog post the author had a similar methodology using

const locs = doc.querySelectorAll('loc');
const urls = [...locs].map(d => d.innerHTML);

Let me know if something similar to that would work, I am very curious as to why the mydoc object is console logging out as {location: null} as that is very odd and not expected.

I noticed there is an arrow on the side of it, in the console log. Have you already tried expanding that to ensure the console log isn't somehow hiding or weirdly formatting the object data? I am guessing you have but it doesn't hurt to ask :sweat_smile: