Mongodb returning object inside array element - node.js

Question

I have this mongoose schema,
const Schema = mongoose.Schema;
const productSchema = new Schema({
name: { type: String, required: true },
image: { type: String, required: true },
saleSizes: [ //Sizes that a particular item has, ex.. Size P , M, G XG
{
saleSize: { type: String, required: true }, //actual sizes, ex.. P
price: { type: Number, required: true }, // sales price for size P
},
],
category: { type: String, required: true },
active: { type: Boolean, default: true },
});
const Product = mongoose.model('Product', productSchema);
module.exports = Product;
when I load the page , I use the find() method to list all my itens with the sale sizes and prices.
this is the function that i'm using.
function homeController() {
return {
async index(req, res) {
const products = await Product.find();
console.log(products);
const categories = [
...new Set(products.map((product) => product.category)),
];
return res.render('home', { products: products, categories: categories });
},
};
}
the return for the find() method is this.
[
{
active: true,
_id: 60affa70d981bc59b64f2e09,
name: 'Alface Americana',
image: 'alface-americana.png',
saleSizes: [ [Object], [Object] ],
category: 'Hortaliças'
},
{
active: true,
_id: 60affa70d981bc59b64f2e0a,
name: 'Couve',
image: 'Couve.png',
saleSizes: [ [Object], [Object] ],
category: 'Hortaliças'
},
{
active: true,
_id: 60affa70d981bc59b64f2e0b,
name: 'Agrião',
image: 'agriao.png',
saleSizes: [ [Object], [Object] ],
category: 'Hortaliças'
},
{
active: true,
_id: 60affa70d981bc59b64f2e0c,
name: 'Rúcula',
image: 'rucula.png',
saleSizes: [ [Object], [Object] ],
category: 'Hortaliças'
},
{
active: true,
_id: 60affa70d981bc59b64f2e0d,
name: 'Limão Taiti',
image: 'limao-taiti.png',
saleSizes: [ [Object], [Object] ],
category: 'Frutas'
},
{
active: true,
_id: 60affa70d981bc59b64f2e0e,
name: 'Goiaba Vermelha',
image: 'goiaba-vermelha.png',
saleSizes: [ [Object], [Object] ],
category: 'Frutas'
}
....
]
Note that saleSizes Properties return as array of objects.
saleSizes: [ [Object], [Object] ].
I need the return to be something like this.
{
active: true,
_id: 60affa70d981bc59b64f2e18,
name: 'Granola',
image: 'granola.png',
price: '500',
saleSizes: [
{saleSize: "P", price: "100"},
{saleSize: "G", price: "200"}
],
category: 'Grãos'
}
what is the best approach to accomplish that?.
PS: sorry for my English, i'm from Brasil and still Learning (I think this is a forever process).

Answer 1

It is returned correctly. saleSizes is the array of Objects. {saleSize: "P", price: "100"} is Object. You can try to access those nested objects like this:
let size = saleSizes[0].saleSize;
let price = saleSizes[0].price;

Answer 2

After Nenad Milosavljevic comment, I change my html code to this.
<% product.saleSizes.forEach(function (saleSize){%>
<span class="font-bold text-lg">R$ <%= saleSize.price %></span>
<button
type="button"
class="size py-1 px-4 rounded-full uppercase text-xs"
><%= saleSize.saleSize %>
</button>
<% })%>
I'm using EJS by the way, now I have a button for each sale Size and a price as well.
Thank You so much for the Help, I was trying to solve a problem that isn't a problem.