Каков наилучший способ перечислить элементы без 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 cities = @ .json импортировать файл?

Answer 1

Вот как сделать это с помощью проекта с открытым исходным кодом 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>'; 
}); 

Answer 2

Вот шаблон функции вы можете использовать, если вы делаете много списков.

ListItems:

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>