Question

我试图在JS中变得更好并学习Nodejs / handlebars / Mean及其中的所有内容我在理解如何在Handlebars中循环对象并且可能将信息从一个地方传递到另一个地方时遇到了问题（但是我不确定）。

为了简洁起见，我用＆＃34;测试数据＆＃34;重新编写了我的代码。所以我可以更好地解释我的问题。

下面是我需要阅读的示例json文件。在这个例子中，它只是我想要引入的一堆图像文件名。

此json文件名为＆＃34; testdata.json ＆＃34;它有：

JSON：

{
  "artists": 
  [
    {
        "name": "person 1",
        "artwork": ["pic1.jpg", "pic2.jpg", "pic3.jpg", "pic4.jpg"]
    },
    {
        "name": "person 2",
        "artwork": ["pic1.jpg", "pic2.jpg", "pic3.jpg", "pic4.jpg"]
    },
    {
        "name": "person 3",
        "artwork": ["pic1.jpg", "pic2.jpg", "pic3.jpg", "pic4.jpg"]
    },
    {
        "name": "person 4",
        "artwork": ["pic1.jpg", "pic2.jpg", "pic3.jpg", "pic4.jpg"]
    }
  ]
}

在app.js中，我需要使用相同名称的变量＆＃34; testdata ＆＃34;。

const testdata = require('./data/testdata.json');

然后我将它与＃34; app＆＃34;到我的主页路线文件

homepageRoute(app, testdata);

我想要做的是从testdata获取带有图像文件名的数组，通过路径将其传递到主页（index.hbs），然后让把手迭代数组以形成一个迷你图片库。

以下是主页的示例路由文件：

主页路由文件：

 module.exports = function homepageRoute(app, testdata){

        app.get('/', function(request, response){

            var TestWholeArray = testdata.artists[0].artwork;    

            response.render('index', {
                pageTitle : "Home Page",
                pageId : "home",
                artistArtwork : TestWholeArray 
            });
        });
    }

当我这样做时：

索引中的句柄：

{{#each artistArtwork}}
   <div class="PICSHERE">
      <img src="images/artwork/{{artistArtwork}}" alt="">
   </div>
{{/each}}

图片不会出现，当我通过控制台查看后端代码时，我看到了这一点：

<div class="PICSHERE"><img src="images/artwork/"" alt=""></div>
<div class="PICSHERE"><img src="images/artwork/"" alt=""></div>
<div class="PICSHERE"><img src="images/artwork/"" alt=""></div>
<div class="PICSHERE"><img src="images/artwork/"" alt=""></div>

文件名永远不会出来。在终端中测试并尝试console.log(TestWholeArray );时，我确实看到并得到了这个：

[ 'pic1.jpg',
  'pic2.jpg',
  'pic3.jpg',
  'pic4.jpg' ]

为了进一步减少测试，当我采取上述相同的测试时，而不是使用它：

var TestWholeArray = testdata.artists[0].artwork;

我在数组中深入挖掘一个图像，通过以下方式反映所有图像：

var TestWholeArray = testdata.artists[0].artwork[0];

然后工作，图像确实出现了。当我尝试传递不止一个时，它会变得疯狂。

我的问题是，我做错了什么或我错过了什么。

先谢谢你的帮助。

Answer 1

循环数组时，使用{{this}}访问当前值。

{{#each artistArtwork}}
   <div class="PICSHERE">
      <img src="images/artwork/{{this}}" alt="">
   </div>
{{/each}}

您尝试执行的操作是从数组artistArtwork访问属性artistArtwork，这当然不存在。

工作演示：

let data = {
  "artists": 
  [
    {
        "name": "person 1",
        "artwork": ["pic1.jpg", "pic2.jpg", "pic3.jpg", "pic4.jpg"]
    },
    {
        "name": "person 2",
        "artwork": ["pic1.jpg", "pic2.jpg", "pic3.jpg", "pic4.jpg"]
    },
    {
        "name": "person 3",
        "artwork": ["pic1.jpg", "pic2.jpg", "pic3.jpg", "pic4.jpg"]
    },
    {
        "name": "person 4",
        "artwork": ["pic1.jpg", "pic2.jpg", "pic3.jpg", "pic4.jpg"]
    }
  ]
};

let artistTemplate = `{{#each artistArtwork}}
   <div class="PICSHERE">
      <img src="images/artwork/{{this}}" alt="">
   </div>
{{/each}}`;

let template = Handlebars.compile(artistTemplate);
console.log(template({ artistArtwork: data.artists[0].artwork }));

<script src="https://cdnjs.cloudflare.com/ajax/libs/handlebars.js/4.0.8/handlebars.js"></script>

Nodejs / Express / JSON / Handlebars循环遍历不使用多个值的数组

1 个答案: