How to access local XML in javascript?

Question

I have a html file, where I keep some notes and other info, I frequently update it, so it got quite big. The problem with that was, that if I change something in the layout, it gets really cumbersome, because I have to change it in so many places. So I had the idea, to put all the data into a XML and transform it into HTML with XSLT.

This immediately brought me to the first issue: I'm not able to access the XML.

The first thing I tried was loading it through XMLHttpRequest:

function loadXMLDoc(filename)
{
    if (window.ActiveXObject)
    {
        xhttp = new ActiveXObject("Msxml2.XMLHTTP");
    }
    else
    {
        xhttp = new XMLHttpRequest();
    }
    xhttp.open("GET", filename, false);
    xhttp.setRequestHeader('Content-Type', 'application/xml');
    try {xhttp.responseType = "msxml-document"} catch(err) {} // Helping IE11
    xhttp.send("");
    return xhttp.responseXML;
}

But this gets blocked with "Reason: CORS request not HTTP". I know why I get it and I also know that there most likely is no way around that when using XMLHttpRequest. (except tampering with local browser security, which I don't want to do).

My next idea was to put the XML as string directly into the script and just parse it into a XML doc. Something like:

var rawXml = "
<?xml version="1.0" encoding="UTF-8"?>
<foo>
    <bar/>
    <bar/>
</foo>
";

But this gets me a "Uncaught SyntaxError: "" string literal contains an unescaped line". So apparently javascript doesn't support any form of verbatim strings and I have to escape all the linebreaks with a \n. My problem with that is, that I'm going to loose the pretty formatting. So reading and editing the XML is going to be a pain. That's definitely something I want to avoid.

EDIT: Thanks to @Taplar for pointing out, that I can use a template literal, which makes the latter approach work. This solution is not optimal, since I use NotePad++ and I can either use syntax highlighting for HTML or XML, plus XML Tools syntax autocheck gets screwed over by all the HTML code. But so far it is the best solution I have. Should there be any other options left, I'd like to hear them!

(As other people already pointed out to use input type=file , this is no real viable solution for me. I want to open the HTML document and read it. But with the input elements I have to first pick the XML and the pick the XSL. That's kinda cumbersome over which I prefer the xml-as-string solution)

Answer 1

You should set the XMLHttpRequestInstance.responseType to 'document' :

 function loadXMLDoc(filename, func){ const x = new XMLHttpRequest; x.open('GET', filename); x.responseType = 'document'; x.onload = d=>{ func(d); } x.send(); return x; } // here's how you would execute loadXMLDoc('yourFile.xml', d=>{ const productNodeList = d.getElementsByTagName('product'); });