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?
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?
Share Improve this question edited Jul 11, 2019 at 12:15 Jonathan Hall 80k19 gold badges160 silver badges204 bronze badges asked Sep 27, 2013 at 1:13 danbohdanboh 7783 gold badges13 silver badges28 bronze badges 3- 3 Check for MVC libraries like Angular.js or Knockout.js – Karl-André Gagnon Commented Sep 27, 2013 at 1:17
- 1 You're misusing the array, you want an object. – elclanrs Commented Sep 27, 2013 at 1:18
- 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 Commented Sep 27, 2013 at 2:43
3 Answers
Reset to default 2Here'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./ibeBIxO/1/edit
If you want something a bit more sophisticated check out Underscore templates.
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
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.