Retrieving external XML file with fetch in JS

Question

I'm trying to retrieve XML data from the URL below with Javascript and later parse the data I want from it. I've set up the fetch request below. My browser shows I'm receiving the yield.xml file, but I'm not able to access it. Instead, I get the error:

scripts.js:149 Uncaught (in promise) TypeError: Cannot read property 'getElementsByTagName' of undefined
    at scripts.js:149
(anonymous) @   scripts.js:149

Any help would be appreciated

function yield() {
  var url = "https://www.treasury.gov/resource-center/data-chart-center/interest-rates/Datasets/yield.xml";
  var myHeaders = new Headers();
  myHeaders.append('Content-Type', 'text/plain');
  fetch(url, {
    headers: myHeaders,
    mode: "no-cors",
  }).then(function(response) {
    console.log(response);
    var xmlDoc = response.responseXML;
    var bc1month = xmlDoc.getElementsByTagName("BC_1MONTH").nodeValue;
    console.log(bc1month);
  });
}

Image of network tab showing yield.xml file and contents

If the error message says that `response.responseXML` is undefined, are you having a hard time believing that? Because it is. Logging the response to console, when I execute the snippet, it shows success: false and status: 0. — marekful, Jan 09 '18 at 02:05
See https://stackoverflow.com/questions/43317967/handle-response-syntaxerror-unexpected-end-of-input/43319482#43319482 & https://stackoverflow.com/questions/43262121/trying-to-use-fetch-and-pass-in-mode-no-cors/43268098#43268098. Don’t use `mode: "no-cors"`. If you do, browsers block your code from accessing the response. Just because you see the response in devtools doesn’t mean the browser will expose it to your code. Simplest fix: change your code to `var url = "https://cors-anywhere.herokuapp.com/https://www.treasury.gov/resource-center/data-chart-center/interest-rates/Datasets/yield.xml"` — sideshowbarker, Jan 09 '18 at 02:25

Retrieving external XML file with fetch in JS

0 Answers0