javascript - 将 JSON 文件作为变量加载到 JS

Question

这个问题已经有答案了:

How do I return the response from an asynchronous call? (42 个回答)

已关闭 6 年前。

大家好!我想制作多语言登陆页面。将会出现语言选择，当您选择语言时，JS 将文本替换为 JSON 文件中的另一种语言。但是当我尝试加载 JSON 时，我遇到了 JSON 和 JS 的问题。我读了很多指南，但没有任何帮助。我拥有的:有 json 文件 - lang.json。以下是其中的一部分:

{
"navigation-list" : {
    "en" : ["About", "Contacts", "Cases"],
    "ru" : ["О нас", "Контакты", "Случаи"],
},
"fb-like" : {
    "en" : "Like",
    "ru" : "Нравится",
},
"facebook-share" : {
    "en" : "Share",
    "ru" : "Поделиться",
},
"twitter-tweet" : {
    "en" : "Tweet",
    "ru" : "Твитнуть",
},
"twitter-follow" : {
    "en" : "Follow on twitter",
    "ru" : "Читать в twitter",
},
}

并且我有 main.js 文件，其中上述 JSON 文件应作为 var 导入。我使用了其他人的脚本: Load local JSON file into variable和 load json into variable

这里是代码:

var json = (function () {
  var json = null;
  $.ajax({
    'async': false,
    'global': false,
    'url': 'lang.json',
    'dataType': "json",
    'success': function (data) {
        json = data;
    }
  });
  return json;
})(); 

console.log(json);

但是我一整天都处于控制台空状态。

此外，我还尝试了其他方法，例如:

var lang={};

jQuery.getJSON("lang.json", function(data) { 
 lang.push(data);
});

console.log(lang); 

没有什么可以帮助我。我做错了什么？

提前致谢!

Answer 1

你不能这样做，你调用的函数在这两种情况下都是异步的。

我将解释第二个。

var lang=[]; // It should be an array not {}

jQuery.getJSON("lang.json", function(data) { 
 lang.push(data); // This line is called second.
});

console.log(lang); // This line is executed first.

这里

jQuery.getJSON("lang.json", function(data) { 
     lang.push(data); // This line is called second.
});

jquery 将读取您的文件 lang.json 但其他代码不会等待它返回。它们将正常执行。

那么，如何读取数据？

只有在调用回调后才能读取数据。在 jQuery.getJSON 中，您还传递了一个函数以及名称 lang.json

function(data) { 
         lang.push(data); 
}

读取文件时将调用此函数。函数的数据参数将包含文件的内容。

所以，你的代码

console.log(lang);//该行首先执行。

当运行时，lang 中没有任何内容，您需要等待回调被调用，然后只有您的 lang 会被初始化。

一种解决方案是从回调本身调用 console.log(lang);。

var lang=[];

jQuery.getJSON("lang.json", function(data) { 
 lang.push(data);
 console.log(lang[0]);
});

如果您有其他代码，那么您可以创建一个函数并从回调中调用它。

 var lang=[];

 jQuery.getJSON("lang.json", function(data) { 
   lang.push(data);
   _do();
 });

 function _do(){
   console.log(lang[0]);
  // Do all code dependent on the lang
 }