Question

所以我正在使用NodeJ（以pug作为其视图引擎）。我的意图是创建一个表，在其中，我的哈巴狗代码上的每个循环都将 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的strong>豌豆和豆；所有这些都在喜欢列上。

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

Answer 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

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

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

2 个答案: