javascript map elements of an array to HTML DIV template

Question

What I'm looking for is either a function or a piece of code that could help me dump the results of an array into an HTML DIV. I know that there's different ways of doing so, but these all require iterating through the array. What I'm looking for is more like a mapping tool. For example:

Let's imagine I have the following array in my javascript:

var myarray = [];
myarray['name'] = 'value1';
myarray['lastname'] = 'value2';
myarray['address'] = 'value3';

What I'd like to do next is somehow associate each of those values of the array to their equivalents in an HTML DIV. For example:

<div id="name"></div>
<div id="lastname"></div> 
<div id="address"></div> 

Or EVEN better, I'd like to be able to have a table in my HTML that could be fetched with this information without using DIVs. Something like:

<table width="277" height="146" border="1">
  <tr>
    <td width="97">Name</td>
    <td width="87">{name}</td>
  </tr>
  <tr>
    <td>Lastname</td>
    <td>{lastname}</td>
  </tr>
  <tr>
    <td>Address</td>
    <td>{address}</td>
  </tr>
</table>

So the idea is that when I get the values in my Javascript (via jquery) I can write the whole content of the array to the HTML table without having to iterate through each of the values of the array.

Any ideas if there's something out there that could help me achieve my goal?

Answer 1

Here's a very simple templating system. First create a script tag for your template:

<script id="template" type="text/html">
  <table width="277" height="146" border="1">
    <tr>
      <td width="97">Name</td>
      <td width="87">{name}</td>
    </tr>
    <tr>
      <td>Lastname</td>
      <td>{lastname}</td>
    </tr>
    <tr>
      <td>Address</td>
      <td>{address}</td>
    </tr>
  </table>
</script>

Then you can render the template with this little function given your data (as an object):

// An object, not an array
var data = {
  name: 'value1',
  lastname: 'value2',
  address: 'value3'
};

// Very basic templating
function render(template, data) {
  var patt = /\{([^}]+)\}/g; // matches {key}
  return template.replace(patt, function(_, key) {
    return data[key];
  });
}

// Grab html from template
var template = $('#template').html();

// Generate html given the data and append to body
$('body').append(render(template, data));

Demo: http://jsbin.com/ibeBIxO/1/edit

If you want something a bit more sophisticated check out Underscore templates .

Answer 2

It sounds like you're looking for a javascript framework that will add HTML elements to the DOM (Document Object Model) on the fly.

In this particular case, iterating over all the array elements isn't that much work.

Here are a couple references to get you started:

Add and remove html elements dynamically with JavaScript

jQuery - Add Elements

Answer 3

You could use JSON, like:

var myarray = {
  name: 'value1',
  lastname: 'value2',
  address: 'value3'
}
var tbl = $(table);
$.each(myarray, function(i, v){
  tbl.append('<tr><td>'+i+'</td><td>'+v+'</td></tr>');
});

Then add your style with jQuery's .css() method.