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

Print JSON data in HTML structure issue

本文关键字：JSON 数据 问题 打印 HTML 结构      更新时间：2023-09-26

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

使用 jQuery 模板绑定 Html。一些示例

类似的东西：

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

虽然使用模板引擎是更简单代码的一个选项，但在这种情况下，您可以直接运行 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相关的。

希望这有帮助。

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

// 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);
相关文章：