jQuery search in an object using a string

Question

UPDATE

23 November 2016:

I was very close to the solution. Rory McCrossan has solved it for me, so I accepted his answer. BUT I changed the code for faster developing. I want to share this so you can use it to.

JSON langfile-v1.0.json

{
    "nl": {
        "text1":"Hallo Wereld!",
        "text2":"voorbeeld.com",
        "text3":"Ik hou van Stack Overflow"
    },
    "en":{
        "text1":"Hello World!",
        "text2":"example.com",
        "text3":"I love Stack Overflow"
    }
}

Javascript / jQuery script.js

//Creating an GLOBAL object
var languageObject;

//Get the language json file
$.get("langfile-v1.0.json", function(response){
    languageObject = response; //Assign the response to the GLOBAL object
    setLanguage(); //Calling the setLanguage() function
});

//Call this function to set the language
function setLanguage() {
    $("lang").html(function() {
        var userLang = navigator.language || navigator.userLanguage;
        var langSupported = false; //Check if the user language is supported
        $.each(languageObject, function(key) {
            if (userLang == key) {
                langSupported = true;
            }
        });
        if (langSupported) {
            //Users language is supported, use that language
            return languageObject[userLang][$(this).html()];
        } else {
            //User language is NOT supported, use default language
            return languageObject.en[$(this).html()];
        }
    });
}

HTML page.html

<lang>text1</lang> <br>
<lang>text2</lang> <br>
<lang>text3</lang>

Demo

You can check how this works on JSFiddle (with a slightly different code because I dont know how to inculde the langfile-v1.0.json file)

Click here for demo

OLD QUESTION POST:

I want to search in a object using a string.

Example:

JSON

{
    "nl": {
        "lang":"Nederlands",
        "header-WelcomeText":"Welkom op de website",
        "header-Sub1":"Hoofdpaneel"
    },
    "en": {
        "lang":"English",
        "header-WelcomeText":"Welcome on the website",
        "header-Sub1":"Dashboard"
    }
}

Javascript/jQuery

var output;
$.get("file.json", function(response){
    output = response; //This is now a object in javascript
});

This all works, here what i want:

//The jQuery code
$('span .lang').text(output.nl.$(this).attr("data-lang"));

//The HTML code
<span class="lang" data-lang="header-Sub1"></span>

I know this will not work, but I know there will be a way to achief this.

Rory McCrossan · Accepted Answer · 2016-11-09 09:36:25Z

1

To make this work there's a few changes you need to make.

when accessing the key of an object through a variable you need to use bracket notation.
to reference the element through the this keyword you need to run your code within it's scope. To do that you can pass a function to the text() method which returns the value you need from the object.
the .lang class is directly on the span, so you shouldn't have the space in your selector.

With all that in mind, this should work for you:

var output = {
  "nl": {
    "lang": "Nederlands",
    "header-WelcomeText": "Welkom op de website",
    "header-Sub1": "Hoofdpaneel"
  },
  "en": {
    "lang": "English",
    "header-WelcomeText": "Welcome on the website",
    "header-Sub1": "Dashboard"
  }
}

$('span.lang').text(function() {
  return output.nl[$(this).data("lang")];
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<span class="lang" data-lang="header-Sub1"></span>

answered Nov 9, 2016 at 9:36

Rory McCrossan

338k41 gold badges322 silver badges353 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

UNTITLED.PNG Over a year ago

Wow! My example was just something random to simply explain what I wanted to have. Didn't know I was this close haha. Thanks!

UNTITLED.PNG Over a year ago

Haha your answer was so fast that I needed to wait 8 minutes to accept this answer ;P But I have done it

Collectives™ on Stack Overflow

jQuery search in an object using a string

UPDATE

Demo

OLD QUESTION POST:

Example:

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

UPDATE

Demo

OLD QUESTION POST:

Example:

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related