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

Question

大家好！我想制作多个朗登陆页面。当您选择lang时，JS将使用JSON文件中的另一个lang替换文本。但是，当我试图加载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，但其他代码不会等待它返回。他们会正常执行。

那么，如何读取数据呢？

只有在回调是called.In、jQuery.getJSON和名称lang.json之后才能读取数据，还可以传递函数。

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

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

所以，你的代码

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

当ran在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
 }