filter supabase to only show items with numbers greater than or equal to a

Hey there! Currently, I am in the process of setting up a store using nextjs pages router and supabase. However, I have encountered a peculiar bug with my product filtering system when dealing with numbers exceeding 4 digits (e.g., 11000).

The structure of my API route is as follows:

async function handler(req: NextApiRequest, res: NextApiResponse) {
  if (req.method !== "POST") {
    // Handle unsupported request methods
    res.status(405).json({ error: "Method Not Allowed" });
    return;
  }


  const {
    minPrice,
    maxPrice,
    oferta,
    garment,
    category,
    search,
  }: {
    minPrice: number | undefined | null;
    maxPrice: number | undefined | null;
    oferta: string | undefined | null;
    garment: string | undefined | null;
    category: string | undefined | null;
    search: string | undefined | null;
  } = req.body;

  let query = supabase
    .from("products")
    .select(
      "seller!inner( status ), id, published, published_version, created_at"
    )
    .eq("suspended", "false")
    .eq("published", "true")
    .eq("seller.status", "live");

  if (oferta === "si") {
    query = query.neq("published_version->>offer_price", "");
  }

  if (oferta === "no") {
    query = query.eq("published_version->>offer_price", "");
  }

  if (category) {
    query = query.eq("published_version->category->>main", category);
  }

  if (garment) {
    query = query.eq("published_version->category->>garment", garment);
  }

  if (minPrice) {
    console.log("minPrice", minPrice);
    query = query.gte("published_version->>price", minPrice);
  }

  // Fetch products based on filters and order them

  query = query.order("created_at", { ascending: false }).limit(50);

  const { data, error } = await query;

  if (error || !data) {
    console.log("ERROR", error);
    res.status(500).json({ error: error.message });
  }

  const products = data?.map((product) => {
    return {
      ...product,
      data: {
        ...product.published_version,
      },
    };
  });

  res.status(200).json({ data: products });
}

Despite everything working smoothly, I'm encountering an issue with the minPrice and maxPrice filter. It seems that filtering with a number greater than 9999 isn't functioning properly.

If anyone can offer assistance or guidance on this matter, it would be greatly appreciated. Thank you!

Answer №1

Problem resolved! It turns out I was incorrectly using the ->> operator. To access the first child of a jsonb object, I should have been using ->

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Sorting custom data in a Vue data table, prioritizing null values to be displayed

Currently, in my VueJS v-data-table setup, I am facing a challenge with custom sorting functions. The table has both numeric and string columns, with some null values scattered throughout. My goal is to sort the data by placing null values at the end of ea ...

What is the best way to retrieve a value from an asynchronous function in Node.js?

var fs = require('fs'); var ytdl = require('ytdl-core'); var favicon = require('serve-favicon'); var express = require('express'); var app = express(); app.use(favicon(__dirname + '/public/favicon.png')); ...

Having trouble with Next-Auth's signIn with Credentials feature in NextJS?

I have recently added the next-auth package to my new Next.js project. Despite following all the documentation for both Next.js and next-auth, I am still unable to resolve the issue. The problem I am encountering is as follows: I am trying to log in to my ...

Step-by-step guide to displaying the dropdown menu button content at the top of the page in main.html by using the frameset tag

The layout of my main.html involves displaying menu.htm and welcome.htm using frameset. One issue that arises is with the drop-down menu buttons "Admin..." and "Scheduler...". When hovering over these buttons, the dropdown content does not display properly ...

Guide on how to verify if a component with a specific name is registered within the Composition API of Vue 3

My current situation involves a template that loads dynamic components based on their names: <template> <div> <div> <div> <component :is="getFormRenderer" &g ...

Tips for retrieving information from a dynamically created form using VUE?

Welcome Community I am working on a parent component that includes a child component. The child component dynamically renders a form with various controls from a JSON object retrieved via a Get request using Axios. My goal is to be able to read and loop ...

embedding fashion within offspring component in vue

Looking to apply inline styles to a child component? I am trying to pass properties like height: 200px and overflow-y: scroll. I attempted passing it this way: <Childcomponent style="height: 200px; overflow-y: scroll;" /> but had no luck. ...

Creating a time-limited personal link with Django Rest Framework and React

I have a frontend application built with React Framework that I want to provide access to via a time-limited personal link, without the need for additional authentication functions. With approximately 1-2 new users per day, my proposed implementation is as ...

Unexpected behavior observed in while loop with dual conditions

To break the while loop, I need two conditions to be met - res must not be undefined, which only happens when the status code is 200, and obj.owner needs to match a specific value I have set. Since it takes a few seconds for the owner on that page to updat ...

Enhancing this testimonial slider with captivating animations

I have designed a testimonial slider with CSS3 and now I am looking to enhance it by adding some animation using Jquery. However, I am not sure how to integrate Jquery with this slider or which plugins would work best for this purpose. Can anyone provide g ...

What is the best way to execute JavaScript on the main MVC page when an AJAX request in a partial view has finished?

My Asp.net MVC partial view is designed for searching and makes an Ajax call to retrieve results. After the results are displayed, the user can select a search result by clicking on a link in one of the rows. Upon selecting a search result, an Ajax post re ...

Updating the status of a checkbox array within the reducer to reflect changes made in the user interface

I've implemented something similar in React: const CheckboxItems = (t) => [ { checked: true, value: 'itemsCancelled', id: 'checkBoxItemsCancelled', labelText: t('cancellations.checkBoxItemsCancelled&apos ...

AngularJS - Filter out items from ng-repeat that match specific string criteria

After successfully cleaning up an external JSON URL feed by removing unnecessary special characters through a filter in my AngularJS code, I am now faced with the challenge of filtering out specific items from an ng-repeat based on a certain string. angul ...

What is the best way to create a floating navigation bar that appears when I tap on an icon?

As a beginner in the realm of React, I recently explored a tutorial on creating a navigation bar. Following the guidance, I successfully implemented a sidebar-style navbar that appears when the menu icon is clicked for smaller screen sizes. To hide it, I u ...

Saving $routeParam in a variable within a factory service in AngularJS Store

Recently I started working with Angular and now I'm attempting to extract the project ID from the URL and use it as a variable within a service. Here's my current code snippet: app.config( ['$routeProvider', function($routeProvi ...

Discover the secrets to easily finding specific items within a table by harnessing the power of the table sorter plugin with

Currently, I am utilizing the tablesorter plugin and its corresponding tablesorter widgets to facilitate searching within a table. However, I encountered an issue with the tablesorterWidgets.js file when attempting to configure the number of rows displayed ...

Animate the Bootstrap carousel from top to bottom instead of the traditional left to right movement

Is there an option available in the bootstrap carousel to animate it from top to bottom and bottom to top, rather than from right to left and left to right? jsFiddle link <div id="myCarousel" class="carousel slide" data-ride="carousel" data-interval=" ...

Delete the value from the array and refresh the HTML with the updated total amount, or display '$' if there is no total amount

Currently, I have two inputs: debit and credit. On button click events, they update an array called 'debits'. Debit adds positive values while credit adds negative values. The next step is to sum the values in the array and assign it to a variab ...

Synchronize your store by utilizing cookies in the nuxtServerInit function of NuxtJS

I am currently working with NuxtJS's auth module and attempting to retrieve the Bearer token along with a custom cookie that holds a sessionType during nuxtServerInit in order to update the store through a mutation. However, I am facing an issue where ...