Question

我有一个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);
  });*/
});

Answer 1

使用jQuery template绑定Html。 Some Sample

Answer 2

类似的东西：

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

Answer 3

尽管使用模板引擎是更简单代码的选项，但在这种情况下，您可以直接运行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>");
    }
}

这是the jsfiddle related。

希望这有帮助。

Answer 4

这里有两个新对象，一个用于第一个对象属性/值，另一个用于剩余对象。仍然不清楚一旦你有它做了什么，但让我知道它是否有帮助：

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

在HTML结构问题中打印JSON数据

4 个答案: