What is the best way to list elements without 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"}
    ];

I want to do a simple for each statement that lists out each city:

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

am I set up properly?

so far, I am using the approach of @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;

It works perfectly, so thank you @Retep. I see in the future, a file getting larger once more cities are added, and was hoping to put this array in json format, and include it later, as well as being able to export from an excel sheet. Could var cities = @.json file import?

Answer 1

Here is how to do it using the open source project 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

Here's a template function you can use if you're doing a lot of lists.

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

example:

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

Output:

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