javascript - Nodejs/Express/JSON/Handlebars 循环遍历数组不适用于多个值

Question

我在理解如何循环遍历 Handlebars 中的对象以及可能如何将信息从一个地方传递到另一个地方时遇到问题。

下面是我需要读取的示例 json 文件。在此示例中，它只是我想要提取的一堆图像文件名。

这个 json 文件名为“testdata.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 中，我需要将其添加到同名的变量 testdata。

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

然后我将它与“app”一起传递到我的主页路由文件

homepageRoute(app, testdata);

我想从testdata中获取带有图像文件名的数组，通过路由将其传递到主页(index.hbs)，然后让handlebars迭代该数组以形成一个迷你图片库。

这是我的主页示例路由文件的样子:

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

当我这样做时:

索引中的 Handlebars :

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