🔍 Help Needed: Search Bar Hides All Items No Matter What I Type

[max.lopezzz]

Hi everyone!

I'm having an issue with my search bar functionality and I'd really appreciate any help or insight.

The problem is that whenever I type anything into the search bar — even if it's an exact match of a product name — all items disappear from the list. It seems like the filtering logic isn't working as intended.

Here’s the code I’m using for my filterItems transformer:

// Reference the item data from the query
const data = {{ getItems.data }};

function filterItems(searchString) {
  // If search string is empty, return all data
  if (!searchString) return data;

  const lowerCaseSearch = searchString.toLowerCase();

  // Filter items based on the "nombre" field
  const filteredData = data.filter(item => {
    // Make sure "nombre" exists and includes the search string
    return item.nombre && item.nombre.toLowerCase().includes(lowerCaseSearch);
  });

  // Return the filtered results
  return filteredData;
}

// Use the filterItems function with the value of the Search Bar component
return filterItems({{ searchBar1.value }});

I’ve also attached some screenshots below in case they help visualize the behavior or data structure:

What could be causing this?

Thanks in advance for any suggestions or debugging tips!

[dguzzo]

Hi Maximiliano!

Can you open up the debug console in the bottom right and paste a screenshot? I see a red dot, which means there's at least one error somewhere in your app's execution. (Whether it's in that transformer or something unrelated remains to be seen.)

[max.lopezzz]

[dguzzo]

so that first line,
data.filter is not a function
is likely the main culprit for why you're seeing zero results.

can you double check the value that const data is being assigned at the top of filterItems? (sometimes query's results come wrapped in an extra field, like query.data.data). you can try printing it via a simple console.log or other means like the Debug console/"view state" of the query itself.

depending on your needs, you can also try the built-in _.filter method. [lodash doc entry]. the native one might be more suitable or even mostly equivalent, but i tend to use the lodash version for consistency elsewhere across my own apps.

[max.lopezzz]

I was able to fix it!
The issue was that items wasn't an array, but .filter requires an array!
Here's my fixed code:

const rawData = {{ getItems.data }};

// Convertir objeto columnar a arreglo de objetos
const data = rawData.nombre.map((_, index) => {
  return {
    id: rawData.id[index],
    nombre: rawData.nombre[index],
    cantidad: rawData.cantidad[index],
    costo: rawData.costo[index],
    precio: rawData.precio[index],
    categoria: rawData.categoria[index],
    subcategoria: rawData.subcategoria[index],
    descripcion: rawData.descripcion[index],
    foto: rawData.foto[index]
  };
});

function filterItems(searchString) {
  if (!searchString) return data;

  const lowerCaseSearch = searchString.toLowerCase();

  return data.filter(item => {
    return item.nombre && item.nombre.toLowerCase().includes(lowerCaseSearch);
  });
}

return filterItems({{ searchBar1.value }});