0

我有一个 JSON 女巫，看起来像这样

{
      "English": "en",
      "Francais": "fr",
      "German": "gm"
  }

现在我需要在 HTML 结构中打印这些数据，看起来像这样

<ul id="links">
            <li class="home">
                <a href="#"></a>
            </li>
            <li class="languages">
                <a href="#">EN</a>   ------ > FIRST LANGUAGE FROM JSON
                <ul class="available">  ----> OTHERS
                    <li><a href="#">DE</a></li>
                    <li><a href="#">IT</a></li>
                    <li><a href="#">FR</a></li>
                </ul>
            </li>
        </ul>

在 javascript 中，我知道如何获取数据并以相同的结构打印所有数据，但如何在示例中显示的结构中执行它？

在Javascript中，我正在获取数据

$.getJSON('js/languages.json', function(data) {
    console.log(data);
  /* $.each(data, function(key, val) {
    console.log(val);
  });*/
});
4

4 回答 4

2

使用jQuery 模板绑定 Html。一些样品

于 2013-09-15T16:23:35.703 回答
0

这里有一些可以为您提供两个新对象，一个用于第一个对象属性/值，另一个用于其余对象。一旦你拥有它，仍然不清楚它做了什么，但如果它有帮助，请告诉我：

// This can be replaced with existing data or updated to var langs = data;
var langs = {"English": "en", "Francais": "fr","German": "gm" };


// jQuery map only works on objects after 1.6, heads up 
var lang_keys = $.map( langs, function( value, key ) {
  return key;
});

// Now that you have an array of the keys, you can use plain-ol shift()    

var primary_lang_key = lang_keys.shift();

// create and populate an object just for your first language:
var primary_lang = {};
primary_lang[primary_lang_key] = langs[primary_lang_key];

// Thanks to shift, we know that populating this object with lang_keys will
// only have remaining items:
var other_langs = {};
$.map( lang_keys, function( lang_key ) {
  other_langs[lang_key]  = langs[lang_key];
});

console.log(other_langs);
于 2013-09-16T07:10:23.203 回答
0

像这样的东西：

var getBlock = function(skipLang) {
    var str = '\
        <ul id="links">\
            <li class="home">\
                <a href="#"></a>\
            </li>\
            <li class="languages">\
                <a href="#">' + data[skipLang] + '</a>\
                <ul class="available">\
    ';
    for(var lang in data) {
        if(lang != skipLang) {
            str += '<li><a href="#">' + lang + '</a></li>';
        }
    }
    str += '</ul></li></ul>';
    return str;
}

var html = '';
for(var lang in data) {
   html += getBlock(lang);
}
于 2013-09-15T16:13:33.337 回答
0

尽管使用模板引擎是更简单代码的一种选择，但对于这种情况，您可以直接运行 for 循环并轻松地在 javascript 代码中分配 HTML。

HTML部分将是这样的

<ul id="links">
    <li class="home">
        <a href="#">home</a>
    </li>
    <li class="languages">
        <ul class="available">
        </ul>
    </li>
</ul>

而JS部分是这样的：

var data = {
      "English": "en",
      "Francais": "fr",
      "German": "gm"
  };

var $liLanguages = $('li.languages');
var $ulAvailable = $('ul.available');

var selectedLanguage = '';

for(var index in data) {
    if(selectedLanguage == '') {
        selectedLanguage = data[index];
        $liLanguages.prepend("<a href='#'>" + data[index].toUpperCase() + "</a>");
    }
    else {
        $ulAvailable.append("<li><a href='#'>" + data[index].toUpperCase() + "</a></li>");
    }
}

这是jsfiddle 相关的。

希望这可以帮助。

于 2013-09-16T06:00:31.790 回答