Javascript 在没有mysql的情况下，列出元素的最佳方式是什么

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

    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"}
    ];

我准备好了吗

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

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

---

它工作得很好，所以谢谢@Retep。我看到在未来，一个文件会随着更多城市的加入而变得越来越大，并且希望将这个数组放在json格式中，并在以后包含它，同时能够从excel工作表中导出。是否可以导入var cities=@.json文件？

以下是如何使用开源项目进行导入

---

这里有一个模板函数，如果你在做大量的列表，你可以使用它

清单项目：

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

例如：

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

---

你可以走了。没有最好的方法，但这似乎是最直观的方法。对每一句话来说都很简单，我在你的文章中看不到简单的方法code@R3tep这是一个观点问题。模板更容易更改。我本可以省略HTML编码，但现在它是通用的，不受给定数据集的限制。哇，这种方法看起来很强大。我确信，今后我将拥有每个城市更多的房产。如果我将所有数据保存在电子表格中并导出为json，我是否可以将json导入var cities？@user1692959模板中的任何单词字符[a-zA-Z0-9_]+都将匹配：keyname。您可以根据需要添加任意多的密钥。非常整洁。如果我将所有信息保存在excel电子表格中，并将其导出为json以放入文件forder中，我是否可以使用jingJs访问json？是的，只要json文件可以通过HTTPS访问谢谢。我真正的目标是将javascript文件保持在最小大小、压缩、压缩、工作等。因此，在您的代码示例中，我没有var。我只需从functionrow{document..}正确地编写jinqJs.from。缩小版位于，包含所有API文档的GitHub项目位于

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>