0

I have a tag like this: The top is my most recent attempt, and the commented out is what I've also tried:

I'm trying to read a json config file. This tag happens in the of the page after 3rd party scripts, and before my own js file.

This config file contains info that is needed for other parts of the page (therefore, needs to be loaded first).

I don't get how I can make the code wait until the variable is defined. I've tried setting callbacks, defining my own sleep() function, I've tried calling these functions in this script tag, as well as another script tag (400 lines down the file) which uses the CONFIGPATH_PRODUCTS var.

I'm from a python background, am I just missing something in JS? IS there a way to read this file relatively fast? The config file is not even very big, is javascript this slow at reading files, or is there another problem here? Someone please help. Thanks

<script>
            var CONFIGPATH_PRODUCTS;
            $.getJSON("configs/config-info.json", function(data) {
                CONFIGPATH_PRODUCTS = data;
            });
            var interval = setInterval(function() {
                console.log('Interval Running');
                if( CONFIGPATH_PRODUCTS == "undefined"){
                    console.log("waiting");
                }else{
                    console.log('Interval Stopped');
                    console.log(CONFIGPATH_PRODUCTS);
                    clearInterval(interval);
                }
                }, 1000);

<!--
            //console.log(CONFIGPATH_PRODUCTS);
            /*
            function readTextFile(file, callback) {
                var rawFile = new XMLHttpRequest();
                rawFile.overrideMimeType("application/json");
                rawFile.open("GET", file, true);
                rawFile.onreadystatechange = function() {
                    if (rawFile.readyState === 4 && rawFile.status == "200") {
                        callback(rawFile.responseText);
                    }
                    else if(rawFile.readyState === 4 && rawFile.status != "200"){ //delete if broken
                        alert(`The Config-info file could not be retrieved from the server. Code: ${rawFile.status}`);
                    }
                }
                rawFile.send(null);
            }
            function sleep(ms) {
                return new Promise(resolve => setTimeout(resolve, ms));
            }
            async function wait_for_json(){
                let location = document.getElementById("loc_of_calc").content;
                let configinfo_path
                if(location == "local"){
                    configinfo_path = "configs/config-info.json";
                }
                else if(location == "confluence"){
                    let confluence_base_url = "http://something.com/";
                    configinfo_path = confluence_base_url + "download/attachments/something.json";
                }
                else if(location = "website"){
                    configinfo_path = "";
                }
                else{
                    alert("location was not confluence or local");
                }
                console.log("configinfo path is: " + configinfo_path);
                readTextFile(configinfo_path, function(text){ CONFIGPATH_PRODUCTS = JSON.parse(text); } );
                while(CONFIGPATH_PRODUCTS == null){
                    await sleep(1);
                }
            }
            function waitForElement(){
                if(typeof CONFIGPATH_PRODUCTS !== "undefined"){
                    console.log("config info loaded");
                    return
                }
                else{
                    setTimeout(waitForElement, 100);
                }
            }
            wait_for_json();
            waitForElement(); */ -->
            
</script>

I also just tried this and it loaded for ages, then it gave an error: "too much recursion"

<script>
                        function fill_configs_dropdown_from_config(){
                            while(CONFIGPATH_PRODUCTS == null){
                                console.log("UNDEFINED");
                                fill_configs_dropdown_from_config();
                            }
                            console.log("filling dropdown");
                            for(let i = 0; i < CONFIGPATH_PRODUCTS.length; i++){
                                let option = document.createElement("option");
                                option.value = CONFIGPATH_PRODUCTS[i];
                                option.text = CONFIGPATH_PRODUCTS[i];
                                document.getElementById("def-files").appendChild(option);
                            }
                            console.log("DROPDOWN FIlled");
                            return;
                        }
                        window.onload = function(){fill_configs_dropdown_from_config();};
                        //fill_configs_dropdown_from_config();
</script>
mrblue6
  • 587
  • 2
  • 19
  • Instead of trying to find a way to wait for the data to become available, you can always use the call back or async/await of the data loader to run the functions that rely on the data to be loaded. – imvain2 Apr 11 '23 at 15:14
  • Sorry, wdym by "use the callback or async/await of the data loader"? – mrblue6 Apr 11 '23 at 15:16
  • The functions that use the data from this config file need to be executed later because they rely on dom elements that don't exist yet – mrblue6 Apr 11 '23 at 15:18
  • All of the methods that load the JSON file have a call back function that is ran when the file is successfully loaded. Inside that function is where you can call the functions that rely on that data to be loaded. – imvain2 Apr 11 '23 at 15:34
  • I'm doing that now: I have the readTextFile function called from wait_for_json(). The callback for readTextFile is `CONFIGPATH_PRODUCTS = x; fill_dropdown_from_config();"`It still doesn't work. It calls the callback but says CONFIGPATH_PRODUCTS is still undefined inside fill_dropdown_from_config() – mrblue6 Apr 11 '23 at 16:27

0 Answers0