0

I have established an API connection which retrieves hundreds of objects and their values via JSON. One of these is a web path to a text only html page. This object is called 'WebVersionTextURL' (the object I am having trouble manipulating).

I am using this in a function to retrieve the text only html, and add this to the JSON output.

The issue that I am running into is that the web path returned is http and the request needs to be served over https. I have tested the text only URL by adding https instead of http to see if I could still access the page, and the response loads fine - which is great.

I am trying to use .replace to substitute http:// for https:// but for whatever reason, I am unable to get it to replace.

CODE:

 <button id="go" class="btn">TEST</button>
    <p>Check console for result</p>

    <script>
    const logBtn = document.getElementById('go');
    logBtn.addEventListener('click', fetchData);

function getText(URL){
    var request = new XMLHttpRequest();
    request.open('GET', URL, true);
    request.send(null);
    request.onreadystatechange = function () {
        if (request.readyState === 4 && request.status === 200) {
            var type = request.getResponseHeader('Content-Type');
            if (type.indexOf("text") !== 1) {
                return request.responseText;
            }
        }
    }
}

async function fetchData() {
    const response = await fetch('url_to_api_connection_here');
    const data = await response.json();

    data.forEach(obj => {
        Object.entries(obj).forEach(([key, value]) => {
        // Log everything to console
        console.log(`${key} ${value}`);
        // Log just WebVersionTextURL and contents
        if  (key == "WebVersionTextURL") {
            value.replace("http://", "https://");
        //  console.log(`${key} ${value}`);
            console.log(getText(`${value}`));
        }
        });
        console.log('-------------------');
    });
}
    </script>

Sample of JSON data returned from API: NB - I have changed the information to sample data

[{
"Name":"John Citizen",
"Subject":"This is a test only",
"WebVersionTextURL":"http://linktowebpagetextonlyhere/t"
}]

Sample of the response data:

 Name John Citizen
 Subject This is a test only
 WebVersionTextURL http://linktowebpagetextonlyhere/t
 undefined
 -------------------

Error message in console:

Mixed Content: The page at 'https://linktolandingpage' was loaded over HTTPS, but requested an insecure XMLHttpRequest endpoint 'http://linktowebpagetextonlyhere/t'. This request has been blocked; the content must be served over HTTPS.

Thank you

pixelcreated
  • 188
  • 9
  • 2
    You forgot to save the return value of your `replace` call into a variable or otherwise use it: `value = value.replace("http://", "https://")` or `getText(value.replace("http://", "https://"))` - `String.prototype.replace` doesn't mutate (it couldn't, as strings are primitive values and hence immutable) but _returns_ the new string. – CherryDT Oct 20 '21 at 21:58
  • And before you follow up with the next question of why your `console.log` logs `undefined` nonetheless: See https://stackoverflow.com/questions/14220321/how-to-return-the-response-from-an-asynchronous-call – CherryDT Oct 20 '21 at 21:59

0 Answers0