json中的jade嵌套对象不会显示

时间:2016-08-27 20:02:05

标签: angularjs json node.js express pug

尝试使用jade json nested object个对象, 但是each prod in order.productOrder并不是prod.name ...

JSON

{
   "id": "57bf5800473ffcd9bec12845",
   "userId": "57988bf249c8791e403ea6f0",
   "paymentTrans": {
      "trandId": 6720391068199,
      "timestampApproved": "Sat Aug 27 2016 19:48:29 GMT+0300 (IDT)",
      "timestampSent": "Sat Aug 27 2016 19:48:29 GMT+0300 (IDT)",
      "serviceName": "PayPal"
   },
   "totalPerOrder": 160,
   "productOrder": [
      {
         "total": 40,
         "price": 4,
         "quantity": 10,
         "name": "Banana",
         "sku": "BAN"
      },
      {
         "total": 120,
         "price": 10,
         "quantity": 12,
         "name": "Fig",
         "sku": "FIG"
      }
   ]
}

tbody
    each order in orders
        tr
            td.tdRight= moment(order.paymentTrans.timestampSent).format('DD.MM.YYY')
            td.tdCenter.price= order.totalPerOrder
            td.tdLeft= order.paymentTrans.serviceName
            td.tdCenter
                button.btn.product.btn-primary(type='button', ng-click='showDetails()')

        each prod in order.productOrder
            tr.show.hidden
                td.tdRight= prod.name
                td.tdCenter= prod.price
                td.tdCenter= prod.quantity
                td.tdLeft= prod.total
        br

 > 20|                             td.tdRight= prod.name
   21|                             td.tdCenter= prod.price
   22|                             td.tdCenter= prod.quantity
   23|                             td.tdLeft= prod.total
Cannot read property 'name' of undefined

在这里尝试了代码jade-demo,并且它是...... {/ p>

玉石输入

doctype html
html(lang="en")
  head
    title= pageTitle
    script(type='text/javascript').
      if (foo) {
         bar(1 + 5)
      }
  block content
    .page-header
        h3 ההזמנות שלי
        table.table.table-bordered
            thead
                tr פירוט הזמנות
            tbody
                each order in orders
                    tr
                        td.tdRight= order.paymentTrans.timestampSent
                        td.tdCenter.price= order.totalPerOrder
                        td.tdLeft= order.paymentTrans.serviceName
                        td.tdCenter
                            button.btn.product.btn-primary(type='button', ng-click='showDetails()')
                    for prod in order.productOrder
                        tr.show.hidden
                            td.tdRight= prod.name
                            td.tdCenter= prod.price
                            td.tdCenter= prod.quantity
                            td.tdLeft= prod.total
                    br

当地人

{
  orders: [
{
   "id": "57bf5800473ffcd9bec12845",
   "userId": "57988bf249c8791e403ea6f0",
   "paymentTrans": {
      "trandId": 6720391068199,
      "timestampApproved": "Sat Aug 27 2016 19:48:29 GMT+0300 (IDT)",
      "timestampSent": "Sat Aug 27 2016 19:48:29 GMT+0300 (IDT)",
      "serviceName": "PayPal"
   },
   "totalPerOrder": 160,
   "productOrder": [
      {
         "total": 40,
         "price": 4,
         "quantity": 10,
         "name": "Banana",
         "sku": "BAN"
      },
      {
         "total": 120,
         "price": 10,
         "quantity": 12,
         "name": "Fig",
         "sku": "FIG"
      }
   ]
},
{
 "id": "57bf5800473ffcd9bec12845",
 "userId": "57988bf249c8791e403ea6f0",
 "paymentTrans": {
    "trandId": 6720391068199,
    "timestampApproved": "Sat Aug 27 2016 19:48:29 GMT+0300 (IDT)",
    "timestampSent": "Sat Aug 27 2016 19:48:29 GMT+0300 (IDT)",
    "serviceName": "PayPal"
 },
 "totalPerOrder": 160,
 "productOrder": [
    {
       "total": 40,
       "price": 4,
       "quantity": 10,
       "name": "Banana",
       "sku": "BAN"
    },
    {
       "total": 120,
       "price": 10,
       "quantity": 12,
       "name": "Fig",
       "sku": "FIG"
    }
 ]
}
  ]
}

更新1

td.tdCenter= order.productOrder

给出:

[ { sku: 'APL', name: 'Apple', quantity: 2, price: 12, total: 24 }, { sku: 'AVC', name: 'Avocado', quantity: 2, price: 16, total: 32 } ]
td中的

mongodb的

"productOrder" : [ { "sku" : "APL" , "name" : "Apple" , "quantity" : 2 , "price" : 12 , "total" : 24} , { "sku" : "AVC" , "name" : "Avocado" , "quantity" : 2 , "price" : 16 , "total" : 32}]

控制台和mongodb的webStorm快照 webStorm snapshot of console and mongodb

订购包含无法显示的order.productOrder数据的屏幕截图 我刚刚添加了一条td行:td.tdCenter= order.productOrder Orders Screenshot with missing data

更新2 - order.js控制器

exports.getOrders = (req, res) => {

    Order.find()
        .populate({
            path: 'orders',
            match: { _id: req.user._id }
        })
        .exec(function (err, orders) {
            orders.forEach(function(elem){
                console.log("ELEM = " + elem.productOrder);
                console.log("ELEM = " + typeof elem.productOrder);
            });

            res.render('account/orders', {
                title: 'ניהול ההזמנות שלי',
                angularApp: 'storeApp',
                orders: orders
            });
        });
};

order.js的控制台快照

console.log("ELEM = " + elem.productOrder); enter image description here

我该如何解决这个问题?

1 个答案:

答案 0 :(得分:0)

首先,我必须感谢@robertklep的持久性和指导...
令人难以置信..... 3天_这个决议:

order.js控制器

Order.find().lean()
        .populate({

该查询需要lean() mongooose函数才能返回javascript objects可以在jade中解析的each&{ for嵌套对象的循环,所以:

<强>玉

each order in orders
    tr
        td.tdRight= moment(order.paymentTrans.timestampSent).format('DD.MM.YYY')
        td.tdCenter.price= order.totalPerOrder
        td.tdLeft= order.paymentTrans.serviceName
        td.tdCenter
            button.btn.product.btn-primary(type='button', ng-click='showDetails()')
                | פירוט
    tr
        td.tdRight= 'name'
        td.tdCenter= 'price'
        td.tdCenter= 'quantity'
        td.tdLeft= 'total'
    for prod in order.productOrder
        tr
            td.tdRight= prod.name
            td.tdCenter= prod.price
            td.tdCenter= prod.quantity
            td.tdLeft= prod.total

<强>输出 chrome snapshoot 归功于

ecdeveloper's OS anser on Convert Mongoose docs to json