Query transformer "error: Cannot read properties of null" when object is not null

[w2go]

For some reason with the following transformer filter that I use across in some of my apps works for some queries and for some it will work for a while and then stop working. I use it to javascript filter certain columns. When it works it is more performant on smaller datasets than using a where clause in the query itself.

const searchTerm = {{searchReservation.value}}.toLowerCase();
const reservations = formatDataAsArray(data);
let filteredReservations;
console.log(searchTerm);
console.log(reservations);
if (!searchTerm) {
  filteredReservations = reservations;
} else {
  filteredReservations = reservations.filter(reservation => reservation.first_name.toLowerCase().includes(searchTerm) ||reservation.last_name.toLowerCase().includes(searchTerm) || reservation.reservation_number.toString().toLowerCase().includes(searchTerm));
}
return filteredReservations;

As it can be clearly seen, the object is not null as the error seems to suggest. The same code actually works for other queries that I use in the same app which are extremely similar.

[stefancvrkotic]

Hey w2go,

I believe the issue is when searchReservation.value is null thus why .toLowerCase() will error out.

You can fix this by with optional chaining

{{searchReservation.value}}?.toLowerCase();

or by using lodash _.toLower() function within the curlies

{{_.toLower(searchReservation.value)}}

Reference examples below.

[w2go]

Thank you for your reply!
I tried that but, unfortunately it didn't work.
Clearly the value is not null as you can see in the console, "shaya" was the value assigned to the searchTerm variable.
Additionally, the code works for other tables that have the same code. See the following gif, it works for all the reservation statuses besides "Rental In Progress".

[stefancvrkotic]

Maybe someone from Retool will be able to help as I do not have full insight in the code.

From my POV I can just guess and suggest to check other portions of code i.e. reservation?.first_name?.toLowerCase() and other parts where you use it as those might need to avoid those values being null as well. (first_name,last_name,reservation_number)

[w2go]

When I check those part of the code like that (reservation?.first_name?.toLowerCase()), the data returns empty no matter what value is in the searchTerm variable. It seems that halfway through the code the reservations variable turns null

[Tess]

Hi @w2go My suspicion is also that the error is coming from these lines:

I would try re-writing the else statement to console log each reservation separately:

 else {
  filteredReservations = reservations.filter(reservation => {
console.log(reservation);    return                                         reservation.first_name.toLowerCase().includes(searchTerm) ||reservation.last_name.toLowerCase().includes(searchTerm) || reservation.id.toString().toLowerCase().includes(searchTerm)});
}

This should* stop console logging on the first record that throws an error, which will narrow down what is happening.

In the below example, the transformer logs the first 9 records without issue. Then, it throws an error & logs the 10th record. I can see that the 10th record has null for the first_name, which causes the transformer to fail.

[w2go]

@Tess

else {
  filteredReservations = reservations.filter(reservation => {
console.log(reservation);    return                                         reservation.first_name.toLowerCase().includes(searchTerm) ||reservation.last_name.toLowerCase().includes(searchTerm) || reservation.id.toString().toLowerCase().includes(searchTerm)});
}

Thank you for your reply.

After changing the log as you suggested, it seems to fail after the first record, because I only get one. That record has a first and last name. See the following GIF:

[Tess]

@w2go Sorry! I think that's a typo on my part since I was using different test data.

reservation.id.toString().toLowerCase().includes(searchTerm)

should be reservation_number instead of id,

reservation.reservation_number.toString().toLowerCase().includes(searchTerm)

[w2go]

Thanks! As you suspected there are null last_names so the transformer fails:

It all seems to work now. Thank you very much!