首页 > 解决方案 > 我想使用jade/pug将对象数组中的每个元素可视化到一个表中

问题描述

{
"nome": "Mario",
"cognome": "Rossi",
"user": "Mario00",
"email": "mariorossi@gmail.com",
"pass": "688787d8ff144c502c7f5cffaafe2cc588d86079f9de88304c26b0cb99ce91c6",
"dataNascita": {$date:"1999-04-10T00:00:00.389Z"},
"pos": {
  "lng" : 45.4773,
   "lat" : 9.1815
},
"genere": "M",
"mailConfermata": "ga8sg90g",
"appunti": [
  {
    "id": "f7onotwkvjdlak9v",
    "titolo": "Giovanni Pascoli",
    "descrizione": "Riassunto della vita di pascoli",
    "dataCaricamento": "2018-05-25T18:56:24.443Z",
    "percorsoFile": "pascoli.docx",
    "tags": [
      "pascoli",
      "italiano",
      "vita",
      "riassunto",          
      "poesia"
    ]
  },
  {
    "id": "dbvuyjt6z25zurhn",
    "titolo": "Napoleone Bonaparte",
    "descrizione": "Riassunto di Napoleone Bonaparte",
    "dataCaricamento": "2018-05-25T19:10:50.914Z",
    "percorsoFile": "NapoleoneBonaparte.docx",
    "tags": [
      "storia",
      "napoleone",
      "imperatore",
      "francia",
      "waterloo"
    ]
  },
  {
    "id": "bib2c6j3lrj3wogu",
    "titolo": "Dante Alighieri",
    "descrizione": "riassunto della divina commedia",
    "dataCaricamento": "2018-05-25T20:56:43.989Z",
    "percorsoFile": "divinaCommedia.docx",
    "tags": [
      "dante",
      "letteratura",
      "divina",
      "commedia",
      "italiano"
    ]
  },
  {
    "id": "st4xvwmollzrwc6r",
    "titolo": "Integrali",
    "descrizione": "Riassunto su integrali",
    "dataCaricamento": "2018-05-26T10:21:13.297Z",
    "percorsoFile": "POWERPNT.EXE",
    "tags": [
      "matematica",
      "riassunto"
    ],
    "commenti": [
      {
        "id": "zcrhxqoxc1jqkn28",
        "autore": "nomeUtenteCookie",
        "idAutore": "idNomeUtenteCookie",
        "dataCaricamento": "2018-05-27T09:15:14.882Z",
        "testo": "lalalalal"
      },
      {
        "id": "xntpzyvy3lep7ipu",
        "autore": "nomeUtenteCookie",
        "idAutore": "idNomeUtenteCookie",
        "dataCaricamento": "2018-05-27T09:16:15.680Z",
        "testo": "hfaaeuIOGFNAIUOVBNUIABNPUAIBVBDAS"
      },
      {
        "id": "15sciqvmkegxr5zt",
        "autore": "nomeUtenteCookie",
        "idAutore": "idNomeUtenteCookie",
        "dataCaricamento": "2018-05-27T09:16:40.035Z",
        "testo": "y'all"
      },
      {
        "id": "wnfjc48vwm8zfxi4",
        "autore": "nomeUtenteCookie",
        "idAutore": "idNomeUtenteCookie",
        "dataCaricamento": "2018-05-27T09:17:20.004Z",
        "testo": "olololo"
      }
    ],
    "voti": [
      {
        "idVotante": "idNomeUtenteCookie",
        "voto": 10
      }
    ],
    "votoMedio": 10
  }
 ]
}

我想在表格中显示剪贴板数组中的每个元素,但这只会让我看到数组的第一个对象,你能解释我错在哪里吗?我在 search.js 的代码部分中使用了 forach 循环,但我可以看到它不能完全滚动剪贴板,因为在表格中它只向我显示了第一个满足且不应该如此的对象

节点(index.js):

MongoClient.connect(url, function(err, db) {
if (err) throw err;
var dbo = db.db("mydb");
dbo.collection("user").find({username: "mario00"}, {
  fields: {appunti: 1, "_id": 0}
}).toArray(function(err, result) {
  if (err) throw err;
  console.log(result)
   res.render('cerca', {
    listaAppunti: result
  });
  db.close();
 });
});

玉(cerca.jade):

// TABLE APPUNITI    
        .table-responsive
          table
            th Titolo
            th Data 
            th Percorso
            th Tags
                tr
                  each appunto, i in listaAppunti
                    td
                      a(href='https://myproject-codeanyapp.com/commenti?id=' + appunto.appunti[i].id) #{appunto.appunti[i].titolo}
                    td=appunto.appunti[i].dataCaricamento 
                    td
                      a(href='https://myproject-codeanyapp.com/files/' + appunto.appunti[i].percorsoFile, download='') #{appunto.appunti[i].percorsoFile}
                    td
                      each tag in appunto.appunti[i].tags
                        a(href='https://myproject-codeanyapp.com/appunti?tags=' + tag) #{'#'+tag}

标签: node.jspug

解决方案


但它只让我看到数组的第一个对象,你能解释我错在哪里吗?

这是因为appunti每个元素内部都是一个数组。您需要有一个额外的each循环来迭代appunti元素。

对您的代码进行此更改,

.table-responsive
    table
        th Titolo
        th Data
        th Percorso
        th Tags
            each appunto in listaAppunti
                each item in appunto.appunti
                    tr
                    td
                        a(href='https://myproject-codeanyapp.com/commenti?id=' + item.id) #{item.titolo}
                    td=item.dataCaricamento
                    td
                        a(href='https://myproject-codeanyapp.com/files/' + item.percorsoFile, download='') #{item.percorsoFile}
                    td
                        each tag in item.tags
                            a(href='https://myproject-codeanyapp.com/appunti?tags=' + tag) #{'#' + tag}

推荐阅读