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

Posted 2023-03-07

【中文标题】使用哈巴狗每次循环遍历一组对象

【英文标题】：Using a pug each loop through an array of objects

【发布时间】：2019-02-03 21:40:57

【问题描述】：

所以我使用的是 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 文件中有以下哈巴狗代码：

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

这给了我以下结果： The table I get when I enter the code above

但是，我的 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 人；所有这些都在 喜欢 列中。

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

【参考方案1】：

我更喜欢使用bootstrap grid system，但您可以尝试添加食物栏，并在此栏下再添加两栏。

类似这样的：

doctype html

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

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

【讨论】：

抱歉，我按了一个按钮并关闭了网络。我编辑了帖子。我认为这应该可行。

【参考方案2】：

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 ")