如何使用 pug 从嵌套对象中提取数据答案

【问题标题】：How to extract data from nested object with pug如何使用 pug 从嵌套对象中提取数据
【发布时间】：2019-04-19 22:31:44
【问题描述】：

我正在尝试从嵌套 JSON 对象访问数据，而 PUG 和 product.highlights[0].heading 中没有任何 javascript，索引需要循环。

JSON 格式

[{"id":"0.33454785604755677","title":"Product 2 Title",
"highlights":[
- {"heading":"Product 2 Heading 1","description":"Product 2 Description 1"},
 - {"heading":"","description":""},
 - {"heading":"","description":""},
 - {"heading":"","description":""}]
}]

我试过了

-var x = [0,1,2,3,4,5] 
-var high =[product.highlights[0].heading,product.highlights[1].heading,product.highlights[2].heading,product.highlights[3].heading] 
each val in x 
 -var p = high[x] // here its not considering 'x' 
  h3 #{p}

也可以直接使用循环

each i in [0,1,2,3,4,5]
 h3 #{product.highlights[i].heading} //but here its not considering 'i'

它在 'name' , 'for' 中工作。

但我需要它在里面工作：

- value=(editing ? product.highlights[0].heading:'')


each i in [1, 2, 3, 4, 5, 6]
  .form-control
  label(for="highlights[" + i +"][heading]") Highlights Number #{i} Heading
  input(type="text",name="highlights[" + i +"][heading]",value=(editing ? product.highlights[0].heading:''))

我不知道如何通过 pug 中的 javascript 访问它

谁能告诉我该怎么做？

【问题讨论】：

我试图在codepen 中复制它，但我无法准确理解您要做什么。您能否返回并编辑您的问题以显示所需的 HTML 输出需要是什么？您还应该删除对 editing 和 product 等变量的引用，因为它们在代码中的其他任何地方都不存在。请查看如何提供MVCE
格雷厄姆非常感谢，虽然我已经想通了。
@UtkarshTomar 很高兴你明白了。您能否将解决方案发布为下面的答案，以便其他人可以从中受益？
@Graham 我发布了我的解决方案，我很确定它应该在不创建函数的情况下也可以工作，即在每个循环中使用它 --> ( product.highlights[i].heading )而不是调用执行此操作的函数...但 idk atlast 这就是它的工作方式

标签： express pug

【解决方案1】：

-function productHeading(product,y){return product.highlights[y].heading;}

 each i in [0, 1, 2, 3, 4, 5]
   .form-control
       label(for="highlights[" + i +"][heading]") Highlights Number #{i+1} Heading
          input(type="text",name="highlights[" + i +"][heading]",value=(editing ? productHeading(product,i):''))

product 存储 findById 方法找到的对象，然后发送到 pug 文件中

const mongoose = require('mongoose');
const Schema = mongoose.Schema;

const SubProductSchema = new Schema({

    product_id: Schema.Types.ObjectId,
    title: String,
    name:{
        type: String,
        unique: true,
        required: true
    },
    price:Number,
    image:String,
    alt: String,
    quantity:Number,
    description:String,
    bgImage:String,
    primaryImage:String,
    primaryAlt: String,
    primaryHeading:String,
    primaryDescription:String,
    highlights:[{
        heading:String,
        description:String,
        icon:String
    }],
    specs:[{
        heading:String,
        description:String,
        image:String
    }],


    featured:Boolean,
    preOrder:Boolean,
    video:Boolean
});

module.exports = mongoose.model('xxx',xxx);

控制器文件

const Product = require('../models/product');
.
.
Product.findById(prodId)
        .then( product => { ....

等等。
Editing 是一个布尔变量，如果它为 true，则调用 pug 文件中的 productHeading 函数并将 value 初始化为它，否则将其设置为 ''（空）

【讨论】：