Resolved: I managed to fix the issue using the method outlined below, and now everything is running smoothly.
<script type="text/javascript">
document.getElementById('test').onclick = function() {
xhr = new XMLHttpRequest();
xhr.open("GET", "filename.json or api url", true);
//xhr.open("GET", "compose.json", true);
xhr.onprogress = function(e) {
var data = e.currentTarget.responseText;
console.clear();
var formattedData = JSON.parse(JSON.stringify(data))
.replace(/(\r\n|\n|\r)/gm, "#")
.replace(/##response:/g, ",")
.replace(/response:/g, "")
.replace(/##/g, "")
.replace(/\\n/g, "\\n")
.replace(/\\'/g, "\\'")
.replace(/\\"/g, '\\"')
.replace(/\\&/g, "\\&")
.replace(/\\r/g, "\\r")
.replace(/\\t/g, "\\t")
.replace(/\\b/g, "\\b")
.replace(/\\f/g, "\\f");
// remove non-printable and other non-valid JSON characters
formattedData = "["+formattedData.replace(/[\u0000-\u0019]+/g,"")+"]";
var finalData = JSON.parse(formattedData);
console.log(finalData);
}
xhr.onreadystatechange = function() {
if (xhr.readyState == 4) {
console.log("Completed = " + xhr.responseText);
}
}
xhr.send();
};
</script>