Retrieve a specific value from an array within Firestore

I am facing an issue where I can only retrieve the values I need from the array by adding a specific string like "اقلام" or "سبورة". However, I want the value to be passed as a prop from another component or screen. Is there a way to resolve this problem?

https://i.stack.imgur.com/dqmST.png

const fetchCategoryProducts = (catId)=>{
    const categoryProductsCollection = query(collection(db, "Product"), where("categories", "array-contains", catId))
    const getCategoryProducts = getDocs(categoryProductsCollection);
    const categoryProducts = (await getCategoryProducts).docs.map(item=>{
        const data = item.data();
        data.id = item.id;
        return data
    })
    console.log(categoryProducts) // encountering empty array in the output
}}

Answer №1

As per my query:

What is the exact value of categoryId?

Your response:

The string value should match one of the values in the array. I tested it with a hardcoded string and it worked fine, but when I passed the catId from other components, I encountered an empty array.

If the code functions correctly with a statically defined value, then chances are the stored value in the database may have trailing white spaces necessitating the use of trim():

const fetchCategoryProducts = (catId)=>{
    const categoryProductsCollection = query(collection(db, "Product"), where("categories", "array-contains", catId.trim()))
    const getCategoryProducts = getDocs(categoryProductsCollection);
    const categoryProducts = (await getCategoryProducts).docs.map(item=>{
        const data = item.data();
        data.id = item.id;
        return data
    })
    console.log(categoryProducts)
}}

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

What is the process for uploading an image with express-fileupload?

Looking to upload an image to Cloudinary via Postman using the express-fileupload library for handling multipart forms. Here is a snippet from my index.ts file: import fileUpload from "express-fileupload"; app.use(fileUpload()); In my controller ...

Is there a method in bootstrap that reveals the elements with the hidden class?

Currently, I am loading data into a bootstrap table on my JSP. The table class is hidden at the moment. After successfully uploading the data into the bootstrap table, I have implemented the following code: $(function() { var table = $('#Table') ...

Creating a straightforward Theme Changer feature using Vue.js

Check out this tutorial for creating a simple Dark/Light theme switcher using Tailwind CSS. This tutorial utilizes vanilla JS and only requires a single app.js file. If I want to incorporate this into a Vue project, should I simply paste the code into ~/s ...

Transition one background image into another using background positioning

Snippet of code: https://jsfiddle.net/foy4m43j/ HTML: <div id="background"></div> CSS: #background { background-image: url("http://i.imgur.com/hH9IWA0.png"); background-position: 0 0; background-repeat: repea ...

Formik's setField function is not properly updating the value of an array when using Material UI's autocomplete

When the data is retrieved from the API, it comes in the following format: otherLanguages:[{code:EN,name:"English"},{code:MD,name:"Mandarin"}] I am attempting to initialize the Autocomplete with this data: initialValues: { otherLa ...

SignalR blocking axios requests (In a Waiting State)

I am currently developing a project that involves bidding on products in Auctions with real-time updates of the bid price. With potentially thousands or even millions of users worldwide participating in the bidding process. We have implemented SignalR for ...

Display a Vue.js div element based on conditions matching a specific variable value

Is it possible for Vue.js to display a div only when a defined variable is set to a specific value? Currently, v-show="variable" can be used to show the div if the variable is set. However, I would like to know if v-show="variable=5" can be implemented t ...

Issue with angularjs ui.router delaying the rendering of ui-view

I've been working on implementing ui-router in my project. Here is the core module setup: var core = angular.module('muhamo.core', ['angular-loading-bar', 'anguFixedHeaderTable', 'ui.router']); For the tra ...

Tips on activating the CSS style while typing using the onChange event in React

Is it possible to dynamically adjust the width of an input as we type in React? Currently, my input has a default width of 1ch. I would like it to increase or decrease based on the number of characters entered, so that the percentage sign stays at the end ...

What is the inner workings behind server side rendering in Next.js?

I am seeking clarification on Server Side Rendering, specifically with Next.js. During server side rendering, I want to confirm the 'execution path' as follows: Client makes a request to the server for the webpage, which serves up an HTML only ...

Incorporating Javascript into a <script> tag within PHP - a step-by-step guide

I am trying to integrate the following code into a PHP file: if (contains($current_url, $bad_urls_2)) { echo '<script> $('body :not(script,sup)').contents().filter(function() { return this.nodeType === 3; ...

Using jQuery to deactivate the submit button when a field is empty or a checkbox is left unchecked

Today is my first attempt at using jQuery, and I could really use some assistance as I'm struggling to achieve the desired outcome. I'm dealing with a table of documents, each containing a checkbox for selection purposes. Additionally, there&apo ...

ngRepeat does not completely refresh the DOM when dealing with a basic array

I have a simple array of numbers shown below using ng-repeat: n = [1,2,3,4,5,6] The problem arises when I modify this array, for example: n=[1,2,3] Instead of fully reloading the DOM, only the last 3 div elements corresponding to array 4, 5, 6 are remo ...

Tips for saving data after reading lines in Node.js

I am working on a project where I need to read data from an external text file into my function. How can I efficiently store each line of the file as a separate variable? const fs = require("fs"); const readline = require("readline"); const firstVariable ...

Switch navigation - always display the menu on the existing page

I have a toggle menu implemented. Please check out the code and functionality on JsFiddle When clicking on a h3 tag like Category 1 (which is an a tag), the menu opens and remains open on the current page. However, if you click on the h3 tag (Category1) ...

Tips for resolving the error "Module not found: Unable to locate '@babel/runtime/core-js/map' in Material-UI"

While working with React using Material UI, I recently updated Material-UI to the latest version and encountered the following error: ../node_modules/material-ui/styles/withStyles.js Module not found: Can't resolve '@babel/runtime/core-js/map&a ...

What are the best practices for using .toString() safely?

Is it necessary for the value to return toString() in order to call value.toString()? How can you determine when you are able to call value.toString()? <script> var customList = function(val, lst) { return { value: val, tail: lst, t ...

Pressing a sequence of buttons to meet a requirement using JavaScript

Currently, I have a set of four buttons that trigger an alert message when all of them are clicked. However, I am looking to modify this behavior so that the alert is displayed only when specific combinations of buttons are pressed, such as button1 and b ...

The JavaScript program for the shopping list is experiencing issues with the formatting of list items

I have been working on developing a shopping list program using JavaScript. The program includes an input box and an "add item" button, which adds the text entered in the input field to an unordered list as a list item. Each list item also contains an imag ...

Finally, $.getJSON has been triggered

When I click on an element, I want to open a bootstrap modal. The modal contains values retrieved from an ajax call using getJSON. However, the issue is that the getJSON function is only called after the jQuery function has finished executing. Below is my ...