Object not found, using parse nodejs

Question

I'm new using parse and I'm trying to get the objects from my database and displaying them with ejs using a for loop in my webpage. I'm using back4app as my database.

Here's what I'm doing:

const Car = Parse.Object.extend('Vehicle');
const query = new Parse.Query(Car);

app.get('/', function(req, res){  

   const VehicleInfo = [
        {
            VehicleName: query.get('Name'),
            Description: query.get('Description'),
            Price: query.get('Price'),
            Rating: query.get('Rating'),
            Route: query.get('Route'),
            PassengerAmount: query.get('PassengerAmount')
        }                         
    ]

    try{
    res.render('index', {
        title: 'mainPage',
        VehicleData: VehicleInfo

    });
    }catch(error){
        throw error.message;
    }

});

I query this and all 5 of my vehicles are displayed in the console.log but when trying to do the same in my .ejs file this shows up and only one div displays

enter image description here

Here's how I'm using the for loop

    <% for (var CarInfo of VehicleData) { %>
            <div class="row">

                <div class="col-lg-4 col-md-6">

                    <!-- Car Item-->
                    <div class="rn-car-item">
                        <div class="rn-car-item-review">
                            <div class="fas fa-star"></div> <%= CarInfo.Rating %>

                        </div>
                        <div class="rn-car-item-thumb">
                            <a href="/car-single">
                                <img class="img-fluid" src="/images/car-1.jpg" alt="Black Sedan" srcset="/images/car-1.jpg 1x, /images/car-1@2x.jpg 2x"/>
                            </a>
                        </div>
                        <div class="rn-car-item-info">
                            <h3>
                                <a href="/car-single"> <%= CarInfo.VehicleName %></a>

                            </h3>                                                               

                            <p>Descripcion: <%= CarInfo.Description %></p>
                            <div class="rn-car-list-n-price">
                                <ul>
                                    <li>Ruta: <%= CarInfo.Route %></li>
                                    <li>Cantidad de Pasajeros: <%= CarInfo.PassengerAmount %></li>
                                </ul>
                                <div class="rn-car-price-wrap">
                                    <a class="rn-car-price" href="/car-single">
                                        <span class="rn-car-price-from">Desde</span>
                                        <span class="rn-car-price-format">
                                            <span class="rn-car-price-amount">$<%= CarInfo.Price %></span>
                                            <span class="rn-car-price-per">/day</span>
                                        </span>
                                    </a>
                                </div>
                            </div>
                        </div>
                    </div>
                    <!-- End Car Item-->                     
                </div>

            </div>
            <% } %>

Answer 1

I'm sure your code doesn't work like this, also not in the console. You need to run find or first in order to fetch objects.

The other problem is that your Promise hasn't been resolved and doesn't contain the result when you pass it on to the .ejs file. It works in the console because the result in the console will be updated once the Promise is resolved.

You need to do

const VehicleInfo = [];
const query = new Parse.Query(Car);
query.find().then(result => {
    result.forEach(vehicle => {
        VehicleInfo.push({
            VehicleName: result.get('Name'),
            Description: result.get('Description'),
            Price: result.get('Price'),
            Rating: result.get('Rating'),
            Route: result.get('Route'),
            PassengerAmount: query.get('PassengerAmount')
        });
    });
}).catch(error => {
    console.error('error fetching objects', error);
});

Alternatively you can await the result for cleaner code:

app.get('/', async function(req, res) {
    const VehicleInfo = [];
    const query = new Parse.Query(Car);
    try {
        const result = await query.find();
        result.forEach(vehicle => {
            VehicleInfo.push({
                VehicleName: result.get('Name'),
                Description: result.get('Description'),
                Price: result.get('Price'),
                Rating: result.get('Rating'),
                Route: result.get('Route'),
                PassengerAmount: query.get('PassengerAmount')
            });
        });
    } catch (error) {
        console.error('error fetching objects', error);
    }
});

Here's more about Promises in JavaScript