变量不能像预期的html那样工作

Question

所以我的问题是下一个：

我正试图从JSON文件中获取文本，在我的html标题上，我链接了一个标签，该标签包含：

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];
}

我正在尝试调用setLang((；函数，然后调用我的getTextFromJson((one，从修改后的变量中获取文本，但当我这样做时，函数说无法从null中获取属性"IDOMA"，所以变量没有改变，HTML看起来像这样：

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

我们的想法是能够在HTML的其他部分使用这种方法来制作多语言页面

谢谢！

Answer 1

$.getJSON是一个异步方法，因此原因可能是在调用getTextFromJson函数时JSON仍未加载，因此从成功回调示例中调用此函数如下：

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];
}

在另一种情况下，您也可以将$.getJSON方法更改为同步方法，但这种方法很快就会被弃用。所以尽量不要使用它。更多详细信息可以在这里找到。

Answer 2

$.getJSON是异步的，因此它不包含execution，并且在从JSON call返回data之前调用您的next script

更好的方法是处理promises。您可以轻松处理error、success的情况。

在您的if和else条件中也有一些code optimization

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];
}

Answer 3

无法获取属性"IDOMA"；来自空

看看你的代码，看看你的编码，我们可以正确地判断出langDoc的初始值为null

language = ""
langDoc = null

点

当从Chrome浏览器控制台调用setLang()时，会抛出如下错误：

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

由于未定义getCookie，因此langDoc保持为null，而getTextFromJson返回如下错误：

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

解决方案getCookie函数用于从适当的目的地获取cookie，这样就不会引发错误。

示例

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 "";
}