Nodejs中handlebars怎么遍历一个二维表,比如象mongodb中取出来的数据

Nodejs中handlebars怎么遍历一个二维表,比如象mongodb中取出来的数据

比如数据是这种

var data={list:[  {name:'xxx' ,age:11 },
   {name:'yy' ,age:22 },
   {name:'z' ,age:33}
]};

用模板


<ul class="data_list">
  {{#each data}}
  <li>{{#each this}}

     <dt> {{name}} }</dt> <dd> {{age}} </dd>
     {{/each}}
  </li>
  {{/each}}
</ul>

这样数据遍历对了,但是没显示出来


5 回复

Node.js 中 Handlebars 遍历二维表

背景介绍

在使用 Node.js 和 MongoDB 进行开发时，我们经常会从数据库中获取到一些复杂的数据结构，例如包含多个对象的数组。这些数据通常需要通过前端模板引擎进行渲染展示。Handlebars 是一个非常流行的模板引擎，它可以帮助我们将后端数据以更友好的方式呈现给用户。

示例数据

假设我们从 MongoDB 中获取到了如下数据：

var data = {
    list: [
        { name: 'xxx', age: 11 },
        { name: 'yy', age: 22 },
        { name: 'z', age: 33 }
    ]
};

模板代码

我们需要创建一个 Handlebars 模板来遍历 list 数组中的每个对象，并展示 name 和 age 字段。正确的模板代码如下：

<ul class="data_list">
  {{#each list}}
  <li>
    <dt>{{name}}</dt>
    <dd>{{age}}</dd>
  </li>
  {{/each}}
</ul>

解释

  • {{#each list}}：这表示对 data 对象中的 list 属性进行遍历。
  • {{name}} 和 {{age}}：这是遍历过程中访问当前对象的属性。
  • {{/each}}：表示结束当前的遍历循环。

渲染逻辑

在 Node.js 后端，我们可以使用 express 和 express-handlebars 来实现数据的渲染。以下是完整的示例代码：

const express = require('express');
const exphbs = require('express-handlebars');

const app = express();
app.engine('handlebars', exphbs());
app.set('view engine', 'handlebars');

app.get('/', (req, res) => {
    var data = {
        list: [
            { name: 'xxx', age: 11 },
            { name: 'yy', age: 22 },
            { name: 'z', age: 33 }
        ]
    };
    res.render('index', { data });
});

app.listen(3000, () => console.log('Server running on port 3000'));

在这个例子中：

  • 我们首先引入了 express 和 express-handlebars。
  • 使用 app.engine 方法设置 Handlebars 作为视图引擎。
  • 在根路由 / 上，我们将数据传递给模板并渲染视图。

总结

通过以上步骤，我们可以成功地将 MongoDB 数据通过 Handlebars 模板进行渲染展示。关键在于正确地使用 {{#each}} 循环来遍历数组，并在模板中正确地引用对象属性。希望这个示例能够帮助你更好地理解和应用 Handlebars 在 Node.js 中的用法。


为什么还要each第二次呢，each针对数组，如果是json直接调用属性不就可以吗

mongodb中取出来的字段名字不一定全都一样 比如

var data={list:[  {name:'xxx' ,age:11 },
   {no:'yy' ,age:22 },
   {sql:'z' ,version:33}
]};

来源： stackoverflow上相似的问题

有两个方法解决不定的属性名字

  1. 重写物件属性

    data.newList=[]; data.list.forEach(function(k){ temp=[] for (var prop in k){ if (k.hasOwnProperty(prop)){ temp.push({ ‘key’ : prop, ‘value’ : k[prop] }); } } data.newList.push(temp); }); 模板

    <ul class=“data_list”> {{#with newList}} {{#each this}} <li> {{#each this}} <dt> {{key}} }</dt> <dd> {{value}} </dd> {{/each}} </li> {{/each}} {{/with}} </ul>

如果不需要key的话

data.newList=[];
data.list.forEach(function(k){
	var temp={};var i=1;
	for (var prop in k){
		if (k.hasOwnProperty(prop)){
			temp['value'+i]=k[prop];
		}
		i++;
	}
	data.newList.push(temp);
});

模板

<ul class="data_list">
	{{#with newList}}
		{{#each this}}
			<li>
			{{#with this}}
				<dt> {{value1}} }</dt> <dd> {{value2}} </dd>
			{{/with}}
			</li>
		{{/each}}
	{{/with}}
</ul>

2.使用自己的helper，详细请查看来源

要使用Handlebars遍历嵌套的数据结构（例如从MongoDB获取的二维表数据），你需要正确地定义嵌套的each循环。你的例子中的问题在于内部的each循环应该直接遍历列表项中的对象属性，而不是再次遍历this。

以下是一个修改后的示例，展示如何正确遍历嵌套数据：

数据结构

var data = {
    list: [
        { name: 'xxx', age: 11 },
        { name: 'yy', age: 22 },
        { name: 'z', age: 33 }
    ]
};

Handlebars模板

<ul class="data_list">
    {{#each list}}
    <li>
        <dt>{{name}}</dt>
        <dd>{{age}}</dd>
    </li>
    {{/each}}
</ul>

解释

  1. 外部each循环：{{#each list}} 遍历data.list数组。
  2. 内部输出：<dt>{{name}}</dt> 和 <dd>{{age}}</dd> 直接输出当前对象的name和age属性。

使用Handlebars

在Node.js中，你可以使用express-handlebars或者handlebars库来渲染模板。以下是使用express-handlebars的一个简单示例：

const express = require('express');
const exphbs = require('express-handlebars');

const app = express();

app.engine('handlebars', exphbs());
app.set('view engine', 'handlebars');

app.get('/', (req, res) => {
    const data = {
        list: [
            { name: 'xxx', age: 11 },
            { name: 'yy', age: 22 },
            { name: 'z', age: 33 }
        ]
    };
    res.render('index', { data });
});

app.listen(3000);

确保你的views目录下有一个名为index.handlebars的文件，包含上述模板代码。

这样设置后，当你访问根路径时，将会看到一个有序列表，每个列表项显示相应的name和age。

回到顶部