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?

This is very useful as well Karl-André Gagnon, I'll keep those resources in mind for when I progress a little more in this small project I'm working on. Thank you!! — danboh
– danboh, Commented Sep 27, 2013 at 2:43

elclanrs · Accepted Answer · 2013-09-27 01:27:38Z

2

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.

answered Sep 27, 2013 at 1:27

elclanrs

94.2k21 gold badges137 silver badges171 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

danboh Over a year ago

This is very close to what I was looking for elclanrs, thank you very much. I'll give this a try!

danboh Over a year ago

would you be able to explain the differences of putting the table inside a <script> instead of a <div> ?

elclanrs Over a year ago

If you put it in a div it will show up in the markup and you'd have to hide it. If you put it in a script tag, then it's just text, it won't be printed out.

mxmader · Accepted Answer · 2013-09-27 01:20:15Z

0

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

answered Sep 27, 2013 at 1:20

mxmader

756 bronze badges

1 Comment

danboh Over a year ago

Thank you mcmader, but I'm actually looking for something for standard.

StackSlave · Accepted Answer · 2013-09-27 01:24:48Z

0

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.

answered Sep 27, 2013 at 1:24

StackSlave

10.6k2 gold badges20 silver badges35 bronze badges

Collectives™ on Stack Overflow

javascript map elements of an array to HTML DIV template

3 Answers 3

3 Comments

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

3 Comments

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related