json中的翡翠嵌套对象不会显示答案

【问题标题】：Jade nested object in json will not displayjson中的翡翠嵌套对象不会显示
【发布时间】：2016-08-27 20:02:04
【问题描述】：

尝试使用nested object 对jade 一个json 对象，但是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 尝试了代码，它工作正常......

玉石输入

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 快照

带有可统一order.productOrder 数据的订单屏幕截图 我刚刚添加了td 行，所以：td.tdCenter= order.productOrder

更新 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);

我该如何解决这个问题？

【问题讨论】：

您显示的 JSON 与“更新”中显示的数组不同。您的代码实际上是否因您发布的 JSON（“香蕉”和“无花果”）而失败？
@robertklep，只是我使用的模型数据不同...代码失败，还有更多：each prod in order.productOrder.length ? order.productOrder : ['empty'] 返回empty...
我无法重现该问题，它对我来说工作得很好。有关生成的输出，请参阅 this gist。
@robertklep，我知道，这就是它如此奇怪的原因......代码在其他地方工作但不在我的应用程序下......知道如何“调试”这个吗？
您的应用程序结构如何？我假设您在 Express 中使用res.render()？试试看它是否与呈现模板的独立版本一起工作得更好。 Here is a gist.

标签： angularjs json node.js express pug

【解决方案1】：

首先，我必须感谢@robertklep 的坚持和指导...
难以置信.....3天...对于这个决议：

order.js 控制器

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

查询需要lean() mongooose 函数才能返回jade 可以在嵌套对象的each 和for 循环中解析的普通javascript objects，因此：

玉

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

输出 归功于

ecdeveloper's OS anser on Convert Mongoose docs to json

【讨论】：