Load JSON file as variable to JS

Question

Good day, everybody! I want to make multi lang landing page. There will be select with languages, when you select your lang, JS replace text with another lang from JSON file. But I have got problem with JSON and JS, when I trying to load JSON. I read a lot of guides but nothing help me. What I have: There is json file - lang.json. Here is some part of it:

{
"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",
},
}

and I have main.js file where above JSON file should be imported as var. I used scripts from another guys: Load local JSON file into variable and load json into variable

Here is code:

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);

But all the day I get in console null.

Also, I tried another ways, such as:

var lang={};

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

console.log(lang);

Nothing help me. What do i do wrong?

Thanks in advance!

You replied that it's too hard one minute after the link was posted. I don't believe that you tried hard enough. — JJJ, May 29 '17 at 14:08
Dmitriy, the problem is that the JSON data becomes available after you logged to the console. If you place your `console.log` inside your handler, you can likely see that it parses correctly. Please specify what do you need to do with the result, so the community here can come up with more specific answer that the link rightly posted above. — Marcin Hagmajer, May 29 '17 at 14:11
guys, I whole day searching how to fix it. I saw this article before, and read it already. — Dmitriy Kavraiskyi, May 29 '17 at 14:11
IF you searched the whole day you would atleast understand the problem, but you don't even know that > `"What do i do wrong?"` — Denny, May 29 '17 at 14:14
Oh, Marcin, thanks, but I didn't understand what i need to do with handler. I should write a function wait until JSON loaded? I want to make multi lang landing page. There will be select with languages, when you select your lang, JS replace text with another lang from JSON file. — Dmitriy Kavraiskyi, May 29 '17 at 14:17
You need to learn Javascript, and learn how to ask questions on Stack Overflow. When asking a question, please show us what you have tried, and the code you used. — , Feb 19 '18 at 18:44

Nadir Laskar · Answer 1 · 2017-05-29T14:23:06.467

You cannot do it like this, the function you are calling is asynchronous in both case.

I will explain the second one.

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.

Here

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

The jquery will read your file lang.json but the other code will not wait for it to return. They will execute normally.

So, How you can read the data?

You can read data only after your callback is called.In your jQuery.getJSON along with the name lang.json you are also passing a function

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

This will be called when the file is read. The data parameter of the function will have the content of the file.

So, your code

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

when ran there is nothing in lang you need to wait till your callback is called then only your lang will be initialized.

One solution will be to call console.log(lang); from the callback itself.

var lang=[];

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

And if you have other code then you can create a function and call that from the callback.

 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
 }

Thank you, Nadir for your response! But I just copied this code for test and I didn't get in console nothing. — Dmitriy Kavraiskyi, May 29 '17 at 14:37

Load JSON file as variable to JS

1 Answers1