Variables does not work as expected javascript - html

Question

So my problem is the next one:

I'm trying to get text from a JSON file, on my html on the header I linked a tag that has:

var language = "";
var langDoc = null;

//Function to change the value
function setLang() {
    var myCookie = getCookie("language");

    if (myCookie == null) {
        document.cookie = "language=español";
        language = "español";
        $.getJSON("/lenguajes/" + language + ".json", function(data) {
            langDoc = data;
        });
    }
    else {
        language = myCookie;
        $.getJSON("/lenguajes/" + language + ".json", function(data) {         
            langDoc = data;
        });
    }
}

//Final function to get text from file
function getTextFromJson(textToGet){
    return langDoc[textToGet];
}

And I'm trying to call the setLang(); function before calling my getTextFromJson() one, to get the text from the modified variable, but when I do it, the functions says that can't get the property "IDIOMA" from null, so the variable is not changing, the HTML looks like this:

<script type="text/javascript"> setLang(); </script>
<script type="text/javascript"> alert(getTextFromJson("IDIOMA")); </script>
<!-- other HTML  -->

And the idea is to be able to use that method on other parts of the HTML to make a multilanguage page

Thank you!

When are you calling the function? Try calling it from $.getJSON — Ullas Hunka, Jul 21 '18 at 06:08
I call setLang(); to get my document and my language and then I call getTextFromJson() and it should look on the document specified on setLang();, if I call it from the $.getJSON it works fine, but it is weird that my variable is not changed at all — Sebastian Rivera Soto, Jul 21 '18 at 06:19

Ullas Hunka · Accepted Answer · 2018-07-21T06:36:44.650

$.getJSON is an async method so the cause can be about the JSON is still not loaded when you are calling your getTextFromJson function so call this function from the success callback example is as follows:

var language = "";
var langDoc = null;

//Function to change the value
function setLang() {
    var myCookie = getCookie("language");

    if (myCookie == null) {
        document.cookie = "language=español";
        language = "español";
        $.getJSON("/lenguajes/" + language + ".json", function(data) {
            langDoc = data;
            getTextFromJson("");
        });
    }
    else {
        language = myCookie;
        $.getJSON("/lenguajes/" + language + ".json", function(data) {         
            langDoc = data;
             getTextFromJson("");
        });
    }
}

//Final function to get text from file
function getTextFromJson(textToGet){
    return langDoc[textToGet];
}

On the other case, you can also change your $.getJSON method to synchronous but this going to be deprecated soon. So try not using that. More details can be found here.

Thanks a lot! I don't know how did I not think about that! I'll try using ajax to make it syncronous. Thanks again! — Sebastian Rivera Soto, Jul 21 '18 at 06:24

score 0 · Answer 2 · edited Aug 30 '20 at 19:52

can't get the property "IDIOMA" from null

Looking at you code, looking at your code, we can tell rightly that langDoc has the initial value null

language = ""
langDoc = null

The Point

When setLang() is called from the Chrome browser console, this throws an error like this:

Uncaught ReferenceError: getCookie is not defined
    at setLang (<anonymous>:6:20)
    at <anonymous>:1:1
setLang @ VM2043:6
(anonymous) @ VM2045:1

an error because getCookie is not defined, so langDoc remains null, and getTextFromJson returns error like this:

Uncaught TypeError: Cannot read property 'IDIOMA' of null
    at getTextFromJson (<anonymous>:25:19)
    at <anonymous>:1:7

SOLUTION The getCookie function to fetch the cookie from the appropriate destination, so that this won't throw an error.

EXAMPLE

function getCookie(cname) {
    var name = cname + "=";
    var decodedCookie = decodeURIComponent(document.cookie);
    var ca = decodedCookie.split(';');
    for(var i = 0; i <ca.length; i++) {
        var c = ca[i];
        while (c.charAt(0) == ' ') {
            c = c.substring(1);
        }
        if (c.indexOf(name) == 0) {
            return c.substring(name.length, c.length);
        }
    }
    return "";
}

NullPointer · Answer 3 · 2018-07-21T07:03:45.453

$.getJSON is asynchronous so it does not hold the execution and your next script is called before the data is returned from JSON call

Better way is to Handle with the promises.You can easily handle error, success cases.

Also there are some code optimization in your if and else condition

var language = "";
var langDoc = null;

//Function to change the value
function setLang() {
    var myCookie = getCookie("language");
    if (myCookie == null) {
        document.cookie = "language=español";
        language = "español";      
    }
    else {
        language = myCookie;      
    }
   var url= "/lenguajes/" + language + ".json";
   var myPromise = $.getJSON("url")
   myPromise.done(function(data) {
     //Handle the success case here
     langDoc=data;
   });

  myPromise.fail(function(reason) {
     //Handle the fail case here
   });
   //After success you can call your function 
   myPromise.then(function(data) {
     langDoc=data;
     getTextFromJson(data);
   });
}

//Final function to get text from file
function getTextFromJson(textToGet){
    return langDoc[textToGet];
}

Variables does not work as expected javascript - html

3 Answers3