使用哈巴狗每次循环遍历对象数组

Question

所以我使用 NodeJs（以 pug 作为其视图引擎）。我的目的是创建一个表，其中我的 pug 代码上的 each 循环将data.json文件中的数据添加到表的行中。

首先让我向您展示我的 NodeJs 代码；我在app.js文件中有以下内容（这是我程序的主要入口点）

var express = require('express');
var pple = require('data.json');
var app = express();

app.set('view engine', 'pug');


// Get the homepage
router.get('/', (req, res, next)=>{
    res.render('index', {pple:pple});
});

app.listen(4000, ()=>{
    console.log('Listening to port 4000');
});

其次，我的index.pug文件中有以下pug代码：

doctype html

html(lang='en')
  body
    table.table.table-striped
      tr
        th Name
        th Position
        th Address
        th Phone

      each n in pple
        tr
          td= n.name
          td= n.position
          td= n.address
          td= n.phone

这给了我以下结果： 当我输入上面的代码时得到的表格

但是，这是我的data.json文件的样子：

[
    {
        "name": "Person1",
        "position": "Software Eng",
        "address": "Nairobi",
        "phone": "0712121212",
        "foods": {
            "likes": ["fish", "chips"],
            "dislikes": ["pork"]
        }
    },
    {
        "name": "Person2",
        "position": "Web Dev",
        "address": "Mombasa",
        "phone": "0711223344",
        "foods": {
            "likes": ["checken", "eggs"],
            "dislikes": ["bread"]
        }
    },
    {
        "name": "Person3",
        "position": "Marketer",
        "address": "Nakuru",
        "phone": "0711121314",
        "foods": {
            "likes": ["peas", "beans"],
            "dislikes": ["weed"]
        }
    }
]

我想添加额外的列，说明他们喜欢和不喜欢的食物。如您所见，他们喜欢的食物分为两种，因此我希望它为第 1 个人展示炸鱼和薯条，为第 2 个人展示鸡肉和鸡蛋，为第 3 个人展示豌豆和豆类；所有这些都在“喜欢”列中。

请帮助我学习如何将所有这些添加到“喜欢和不喜欢”列中。谢谢你。

Answer 1

Pug 评估内联 JavaScript，因此您可以添加 JavaScript 代码来格式化您的foods.likes和foods.dislikes.见https://pugjs.org/language/code.html

以下应该可以解决问题，只需使用Array.prototype.join()来组合喜欢和不喜欢的食物。

doctype html

html(lang='en')
  body
    table.table.table-striped
      tr
        th Name
        th Position
        th Address
        th Phone
        th Liked Foods
        th Disliked Foods

      each n in pple
        tr
          td= n.name
          td= n.position
          td= n.address
          td= n.phone
          td= n.food.likes.join(" and ")
          td= n.food.dislikes.join(" and ")