javascript 将数组的元素映射到 HTML DIV 模板答案

【问题标题】：javascript map elements of an array to HTML DIV templatejavascript 将数组的元素映射到 HTML DIV 模板
【发布时间】：2013-09-27 01:13:02
【问题描述】：

我正在寻找可以帮助我将数组结果转储到 HTML DIV 中的函数或一段代码。我知道这样做有不同的方法，但这些都需要遍历数组。我正在寻找的更像是一个映射工具。例如：

假设我的 javascript 中有以下数组：

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

接下来我想做的是以某种方式将数组的每个值与它们在 HTML DIV 中的等价物相关联。例如：

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

或者更好的是，我希望能够在我的 HTML 中有一个表格，可以在不使用 DIV 的情况下使用此信息获取该表格。比如：

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

所以我的想法是，当我在 Javascript（通过 jquery）中获取值时，我可以将数组的全部内容写入 HTML 表，而无需遍历数组的每个值。

有什么想法可以帮助我实现目标吗？

【问题讨论】：

检查 Angular.js 或 Knockout.js 等 MVC 库
你误用了数组，你想要一个对象。
这对 Karl-André Gagnon 也非常有用，当我在我正在进行的这个小项目中取得更多进展时，我会记住这些资源。谢谢！！

标签： javascript jquery html arrays tags

【解决方案1】：

这是一个非常简单的模板系统。首先为您的模板创建一个脚本标签：

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

然后，您可以在给定数据（作为对象）的情况下使用这个小函数渲染模板：

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

演示： http://jsbin.com/ibeBIxO/1/edit

如果您想要更复杂的东西，请查看Underscore templates。

【讨论】：

这和我要找的elclanrs非常接近，非常感谢。我试试看！
您能解释将表格放入
如果你把它放在一个 div 中，它会显示在标记中，你必须隐藏它。如果你把它放在一个脚本标签中，那么它只是文本，它不会被打印出来。

【解决方案2】：

听起来您正在寻找一个 javascript 框架，该框架将动态地将 HTML 元素添加到 DOM（文档对象模型）。

在这种特殊情况下，遍历所有数组元素并没有太多工作。

以下是一些帮助您入门的参考资料：

Add and remove html elements dynamically with JavaScript

jQuery - Add Elements

【讨论】：

谢谢你 mcmader，但我实际上正在寻找标准的东西。

【解决方案3】：

您可以使用 JSON，例如：

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

然后使用 jQuery 的 .css() 方法添加您的样式。

【讨论】：