没有mysql列出元素的最佳方法是什么

Question

    var cities = [
    {"name":"About","link":"/","flag":"international"},
    {"name":"Buenos Aires","link":"buenos-aires","flag":"argentina"},
    {"name":"La Plata","link":"la-plata","flag":"argentina"},
    {"name":"Cologne","link":"cologne","flag":"germany"},
    {"name":"London","link":"london","flag":"unitedkingdom"},
    {"name":"Montreal","link":"montreal","flag":"canada"},
    {"name":"Melbourne","link":"melbourne","flag":"australia"}
    ];

我想为每个列出每个城市的语句做一个简单的：

    <a href="link" class="flag">name</a>

我的设置是否正确？

到目前为止，我正在使用@R3tep的方法

var cities = [
    {"name":"Melbourne","link":"melbourne","flag":"australia"},
    {"name":"Montreal","link":"montreal","flag":"canada"},
    {"name":"London","link":"london","flag":"unitedkingdom"},
    {"name":"Cologne","link":"cologne","flag":"germany"},
    {"name":"La Plata","link":"la-plata","flag":"argentina"},
    {"name":"Buenos Aires","link":"buenos-aires","flag":"argentina"},
    {"name":"About","link":"/","flag":"international"}
];
    var city = "";
    for(var i = cities.length; i--;){
    city = city + "<div class='form-body'><div class='form-group'><label class='control-label col-sm-12'><a title='Find Language Exchange Events in "+cities[i].name+"' href='"+cities[i].link+"'><div class='city_wrapper'><img class='clip sprite_cities_"+cities[i].flag+"' alt='Language Exchange in "+cities[i].name+" - Mundo Lingo' src='images/international/mundo-lingo-language-exchange-page-elements.png'/><span class='title'>"+cities[i].name+"</span></div></a></label></div></div>";
}
document.getElementById("city-demo").innerHTML = city;

效果很好，谢谢@Retep。我看到将来，一旦添加更多城市，文件就会变大，并希望将此数组以 json 格式放入，并在以后包含它，以及能够从 excel 表中导出。 var city = @.json 文件可以导入吗？

Answer 1

如果您要处理大量列表，可以使用以下模板函数。

列表项：

function listItems(arr, tpl, encode) {
  var html = "";

  var entities = {
    '"': """,
    '<': "&lt;",
    '>': "&gt;",
    //'/': "&#47;",
    '&': "&amp;",
    "'": "&#39;"
  };


  for (var i = 0, len = arr.length; i < len; i++) {
    var item = arr[i];
    html += tpl.replace(/\:\w+/g, function(m){
      var value = item[m.substr(1)] || m;
      if (encode) { 
        value = value.replace(/["<>\/'&]/g,function(m){
          return entities[m] || m;
        });
      }
      return value;
    });
  }
  return html;
}

示例：

var cities = [
    {"name":"About","link":"/","flag":"international"},
    {"name":"Buenos Aires","link":"buenos-aires","flag":"argentina"},
    {"name":"La Plata","link":"la-plata","flag":"argentina"},
    {"name":"Cologne","link":"cologne","flag":"germany"},
    {"name":"London","link":"london","flag":"unitedkingdom"},
    {"name":"Montreal","link":"montreal","flag":"canada"},
    {"name":"Melbourne","link":"melbourne","flag":"australia"}
    ];

var cityLink = '<a href=":link" class=":flag">:name</a>\n';
var html = listItems(cities, cityLink, true);
console.log(html);

输出：

<a href="/" class="international">About</a>
<a href="buenos-aires" class="argentina">Buenos Aires</a>
<a href="la-plata" class="argentina">La Plata</a>
<a href="cologne" class="germany">Cologne</a>
<a href="london" class="unitedkingdom">London</a>
<a href="montreal" class="canada">Montreal</a>
<a href="melbourne" class="australia">Melbourne</a>

Answer 2

这是使用开源项目http://www.jinqJs.com的方法 Fiddler

 var cities = [
    {"name":"About","link":"/","flag":"international"},
    {"name":"Buenos Aires","link":"buenos-aires","flag":"argentina"},
    {"name":"La Plata","link":"la-plata","flag":"argentina"},
    {"name":"Cologne","link":"cologne","flag":"germany"},
    {"name":"London","link":"london","flag":"unitedkingdom"},
    {"name":"Montreal","link":"montreal","flag":"canada"},
    {"name":"Melbourne","link":"melbourne","flag":"australia"}
    ];

jinqJs().from(cities).select( function(row) {
    document.body.innerHTML += '<a href="' + row.link + '">' + row.name + '</a><br>';
});