jQuery使用字符串在对象中搜索

时间:2016-11-09 09:33:10

标签: javascript jquery json object

更新

2016年11月23日:

我非常接近解决方案。 Rory McCrossan已经为我解决了这个问题,所以我接受了他的回答。 但是我更改了代码以加快开发速度。我想分享这个,以便你可以使用它。


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>


演示

你可以检查它在JSFiddle上是如何工作的(代码略有不同,因为我不知道如何包含 langfile-v1.0.json 文件)


Click here for demo

OLD QUESTION POST:

我想使用字符串搜索对象。

实施例

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

这一切都有效,这就是我想要的:

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

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

我知道这不起作用,但我知道有办法实现这一目标。

1 个答案:

答案 0 :(得分:1)

要完成这项工作,您需要进行一些更改。

  • 通过变量访问对象的键时,需要使用括号表示法。
  • 通过this关键字引用该元素,您需要在其范围内运行代码。为此,您可以将函数传递给text()方法,该方法从对象返回所需的值。
  • .lang课程直接在span上,因此您不应该在选择器中占用空间。

考虑到所有这些,这应该对你有用:

&#13;
&#13;
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")];
});
&#13;
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<span class="lang" data-lang="header-Sub1"></span>
&#13;
&#13;
&#13;