Question 292722 in Javascript Question posted in
A very good W3school tutorial can be found here.

Showing json data from javascript fetch request from browser to different url

I wrote this issue late at night after banging away with frustration for 2 days on it, so let me add a couple things and fix a couple typos.

I am loading a script that would be loaded in via google tag manager with the following url: example.org/somescript.js so that when the user visits example.com/something/?userid=ABC the script example.org/somescript.js loads on to the page via the google tag manager

The script goes around and makes some color choices to the DOM.

All good.

Inside the script, it makes a fetch request based on the user ID to a remote url: example.net

//scriptblock_1

const getstuff = fetch("https://example.net/users/abc")
        .then((response) => response.text())
        .then((data) => {
            return data;
        }
    );


const dostuff = () => {
    getstuff.then((a) => {
         console.log(a);  // will result in test
         console.log(JSON.parse(a).custom_css_final);    // will result in undefined
         var css2 = document.createElement('style');
         css.id = 'newcss'
         css.setAttribute('type', 'text/css');
         document.getElementsByTagName('head')[0].appendChild(css);

         setTimeout(function() {
            if (css.styleSheet) {
                css.styleSheet.cssText = JSON.parse(a).custom_css_final;
            } else {
                css.appendChild( document.createTextNode(JSON.parse(a).custom_css_final) );
            }
         }, 300)
     })
}

dostuff();

https://example.net/users/abc will return a payload like this:

{"status": false, "cool":"cool", "custom_css_final":".something { color: #00FF00; }"}

I am attempting to use safe simple cors headers, so my response from example.net returns stringified data like this. The server side code uses this to make the payload response:

var data = {
    "status": false,
    "cool":"cool",
    "custom_css_final":".something { color: #00FF00; }"
}
var json = JSON.stringify(data)
const init_no_authresponse = { headers: {
 "content-type": "text/plain", 
 "Access-Control-Allow-Origin": "*",
 "Cache-Control": "no-store, max-age=0"
}, status: 200 }

return new Response(json, init_no_authresponse)

If I paste this code from scriptblock_1 into the browser console it runs fine, if I load this from the website load, it will not show the parsed data: ie console.log(a).custom_css_final instead will show undefined while just console.log(a) will show the total response.

I believe this is a CORS issue, can anybody spot the issue and how to resolve it? Is it my header data I am returning, is it the way I am fetching? Thanks.

Anybody understand how I am treat his promise or CORS issue improperly? Appreciate it!

Tags:

2

Answers


  1. Chosen as BEST ANSWER
    0

    This code actually is working. In production the code runs through an obfuscator, and for some reason the obfuscator is screwing something up and not allowing it to run properly. Telling the obfuscator to not obfuscate "dostuff" so that the function is called seems to fix the issue...no idea why but i can live with dostuff not being obfuscated.


  2. 0 
    var data = {
"status": false,
"cool":"cool"
"yes":"yes"
           }

    You have a syntax error in your JSON object. Specifically, you’re missing a comma between the "cool":"cool" and "yes":"yes" properties.

    In both JSON and JavaScript object literals, each key-value pair must be separated by a comma. Here’s the corrected version of your object:

    var data = {
"status": false,
"cool": "cool",
"yes": "yes"
           }
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search