用胡须遍历一组对象

Question

编辑：更新此线程以澄清我的问题。

我进行了一个 ajax 调用，它以 json 格式返回一个数据集，如下所示：

所有内容（包括正确的列名）都已通过 DB 视图处理，因此我想编写一个脚本，它只抓取数据集并将其输出到格式良好的 html 表中。这样可以更改数据库的表\视图（添加和删除列），并且不必更新代码。我一直试图让这个与小胡子一起工作，但似乎没有一种简单的方法可以做到这一点。在examples 中，我发现有人使用带有对象数组的 mustache，他们都明确引用了模板中的对象属性。我不知道对象属性（数据集的列）的数量或名称是否会占主导地位，因此我无法在模板中静态输入它们。

现在我正在使用两个模板，一个用于标题，一个仅用于表格行：

<script id="datasetTable" type="text/template">
        <table class="table table-hover table-bordered">
            <thead>
                <tr>
                    {{#headers}}
                    <th>{{.}}</th>
                    {{/headers}}
                </tr>
            </thead>
            <tbody>
            </tbody>
        </table></script>

<script id="datasetTableRows" type="text/template">
                <tr>
                {{#rows}}
                    <td>{{.}}</td>
                {{/rows}}
                </tr>
</script>

这是我的使用方法：

//Build table headers from dataset's columns
datasetCols = [];
for (var keyName in dataset[0]){
    datasetCols.push(keyName);
};

//Build table rows from dataset rows
var renderedTableRows = ''; 
var tplRows = document.getElementById('datasetTableRows').innerHTML;
datasetLength = dataset.length;
for (var i=0; i<datasetLength; i++) {
    var currentRow = dataset[i];
    var rowValues = [];
    for (var prop in currentRow){
        rowValues.push(currentRow[prop]);
    }
var renderedHtml = Mustache.render(tplRows, {rows: rowValues});
renderedTableRows += renderedHtml;
}

//render table with headers
var $renderedTable = $(Mustache.render('datasetTable', {headers: datasetCols}));
$renderedTable.find('tbody').html(renderedTableRows);

$(htmlContainer).html($renderedTable);

这很好用，但我真的很想通过只使用一个模板来进一步简化它。 mustache 能否以更有效的方式处理此问题 - 无需我在模板中显式引用对象属性的名称？

我还想补充一点，我已经在很多其他地方使用了 mustache（我现在不想用新引擎重写代码）所以如果 mustache 做不到我'暂时还是坚持纯js吧。

Answer 1

我没有亲自使用过小胡子，但它们都非常相似。

此外，由于它是无逻辑的，因此您确实希望返回更有用的格式。即在这种情况下，数组数组会更好。

[["234", "ddg", "aa"], ["and, so on", "and so on", "and so on"]]

但如果您知道总会返回三列，您可以执行以下操作：

<table class="table table-hover table-bordered">
<thead>
   <th> Whatever your headers are </th>
</thead>
   <tbody>
     {{#.}}
      <tr>
         <td>{{col1}}</td>
         <td>{{col2}}</td>
         <td>{{col3}}</td>
      </tr>
     {{/.}}
 <tbody>
</table>

或者枚举对象：

<table class="table table-hover table-bordered">
<thead>
   <th> Whatever your headers are </th>
</thead>
   <tbody>
     {{#.}}
          <tr>
         {{#each dataSet}}
            <td>{{this}}</td>
         {{/each}}
          </tr>
     {{/.}}
 <tbody>
</table>

另外，在 javascript 中创建 HTML 时，使用数组会更快。

 var somehtml = [];
 somehtml.push('something');
 somehtml.push('something else');
 somehtml = somehtml.join('');