Los datos del servidor aparecen como [Object object] en el cliente.
Estoy intentando mostrar mis datos que se envían desde el servidor pero no se muestran correctamente (ver [Object object] en la parte inferior izquierda de la imagen anterior). Aquí está el código del lado del cliente:
<div class="card-body">
<h5 class="card-title"><%= event.event_name %></h5>
<p class="card-text"><%= event.description %></p>
<p class="card-text"><%= eventData %></p>
</div>
El servidor envía los datos en una matriz en el siguiente formato:
const eventData = [{
_id: ‘objectId_for_the_event’,
guests: [
‘guestId1’,
‘guestId2’,
‘guestId3’,
‘guestId4’,
‘guestId5’
],
totalGuests: 5,
attendedGuests: 0
}
]
Quiero que los valores de totalGuests y attendedGuests se muestren en el cliente. Aquí está la función en el servidor (es larga y un poco confusa, pero el console.log en la última línea funciona perfectamente, así que las variables están funcionando):
module.exports.showEvent = async (req, res) => {
const event = await Event.findById(req.params.id).populate(‘artist’);
const { guest_id } = req.cookies;
let totalGuests = 0;
let attendedGuests = 0;
const eventData = await Event.aggregate([
{
“$match”: {
“_id”: objectId(req.params.id)
}
},
{
$project: {
_id: 1,
name: 1,
guests: 1,
totalGuests: { $cond: { if: { $isArray: “$guests” }, then: { $size: “$guests” }, else: “NA” } },
attendedGuests: {
$size: {
$filter: {
input: “$guests”,
as: “guest”,
cond: {
$and: [{
$eq: [“$$guest.attended”, “Y”]
}]
}
}
}
}
}
}
])
if (eventData && Array.isArray(eventData) && eventData.length > 0) {
totalGuests = eventData[0].totalGuests;
attendedGuests = eventData[0].attendedGuests;
}
if (!event) {
req.flash(‘error’, ‘Cannot find that Event’);
return res.redirect(‘/events’);
}
res.render(‘events/show’, { event, eventData });
console.log(totalGuests, attendedGuests);
};
¿Cómo puedo obtener esas dos variables de la matriz y en el cliente?
davy.ai
El problema aquí es que la variable
eventDataes un array con un solo objeto dentro, y se está intentando mostrar todo el array en el código del lado del cliente. Para mostrar únicamente los valores detotalGuestsyattendedGuests, se pueden acceder directamente a esos valores desde el arrayeventDataen el código del lado del cliente, en lugar de mostrar todo el array.Así es como se puede modificar el código del lado del cliente para mostrar los valores de
totalGuestsyattendedGuests:Tenga en cuenta que
eventData[0]accede al primer (y único) objeto en el arrayeventData. Luego se pueden acceder directamente a los valorestotalGuestsyattendedGuestsdesde ese objeto utilizando la notación de puntos.¡Espero que esto sea de ayuda! Háganos saber si tiene alguna otra pregunta.