Javascript Nodejs/Express/JSON/handlebar在数组中循环，不能使用多个值

我正在努力提高JS的水平，学习Nodejs/handlebars/Mean以及其中的所有内容。我在理解如何在handlebars中循环一个对象，以及如何将信息从一个地方传递到另一个地方时遇到了问题（但我不确定）

为了简洁起见，我用“测试数据”重新缩短了代码，以便更好地解释我的问题

下面是一个示例json文件，我需要从中读取。在本例中，我只想引入一组图像文件名

此json文件名为“testdata.json”，它具有：

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"]
    }
  ]
}

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

在app.js中，我要求它使用一个同名的变量“testdata”

然后，我将其与“应用程序”一起通过

homepageRoute(app, testdata);

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

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

主页路由文件：

{
  "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"]
    }
  ]
}

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

当我这样做时：

索引中的把手：

{
  "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"]
    }
  ]
}

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

为了进一步减少测试，当我进行上述相同测试，但不使用此测试时：

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

我在阵列中深入挖掘了一点，通过以下方式将一幅图像与所有图像相对：

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

然后，工作，图像出现。当我试着通过不止一个的时候，它会发疯

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

---

感谢advanced的帮助。

循环数组时，请使用

{{this}

访问当前值

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

---

循环数组时，使用

{{{this}}

访问当前值

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

---

是的，我非常困惑。我一直看着它，好像“这没有意义”，但是哈哈，你明白了。谢谢你的时间和帮助！是的，我非常困惑。我一直看着它，好像“这没有意义”，但是哈哈，你明白了。谢谢你的时间和帮助！