Retrieving the length of an array from Firebase Firestore

Recently, I dove into a project that involves using Next JS and Firebase. After successfully storing data in Cloud Firestore, I encountered an issue when trying to retrieve the length of an array from the database. Below is an image illustrating the data structure stored in Firestore: https://i.sstatic.net/oIw26.png

I attempted the following code snippet:

let len = 0
const ref = firebase.firestore().collection("users").doc(user.uid).get().then(snap => {
len = snap.data().disliked1.length
console.log(len)
})

Unfortunately, running this code returns undefined.

Any suggestions on how to accurately retrieve the length of the disliked1 array?

javascriptarraysfirebasegoogle-cloud-firestorenext.js

Answer №1

Ensuring the correct ID is logged beforehand and verifying the existence of the received snapshot is essential.

let len = 0
console.log(user.id)
const ref = firebase.firestore().collection("users").doc(user.uid).get().then(snap => {
  if (snap.exists) {
    console.log(snap.data())
    len = snap.data().disliked1.length
  } else {
    console.log("Snapshot not found")
  }
  console.log(len)
})

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

"Unlocking the potential of relationships in Drizzle: A guide to declaring and querying with

I am currently working on a Next.js project where I need to query user permissions using Drizzle ORM and Supabase. However, I keep encountering an error when I try to include with in the query based on the documentation provided here. The error message di ...

next.jssupabasedrizzle

Counting each item with jQuery and assigning them numbers 02, 03, 04, etc., with the exception of the first item which will display as "Up Next

I'm still learning jQuery and here's the code I've put together after researching on stackoverflow and other platforms: var counter = 1; $('.next-page .nav-item').each(function () { if ($(this, ':gt(0)')) { $(this ...

javascriptjquery

What is the best way to ensure that the search box automatically adjusts its position and size regardless of the screen resolution?

I'm currently working on a responsive website project and facing an issue with the absolute positioning of the search bar on the main page, which is crucial for me. Below is the code snippet: <div class="span4"> <form class="well form ...

javascriptjqueryhtmlcss

Present a Java-generated JSON object on a JSP page using JavaScript

Hello, I am currently working on creating a Json object in Java and would like to display the same JSON object in JSP using JavaScript. Essentially, I am looking to add two more options in my select box using Ajax. The Ajax is being called and I can see th ...

javascriptajaxjson

Is there a way to determine whether all fields in a schema have been populated or remain empty?

I am working with a schema that looks like this: How can I determine if all the fields in the schema have been filled or not? The front-end (React.js) includes an onboarding process where users who are logging in for the first time need to complete onboa ...

javascriptnode.jsreactjsmongoosejoi

Using AJAX to create an interactive dropdown menu with changing options

I have been working on creating a dropdown menu using Ajax. When hovering over the navigation bar, the menu successfully triggers the Ajax function to display the dropdown options. The issue arises when attempting to navigate to another page (show_activi ...

javascripthtmlcssajax

What is the process of connecting JSON keys to one another?

I am currently brainstorming a solution to link two distinct JSON formats with their respective keys. Here are the two formats: { "price": [ 511, 499, 419, 312 ], "paid": "OK", "contract": "year", "begindate": "01/01/2018", " ...

javascriptc#.netjsondata-mapping

The JavaScript alert box cannot retrieve data from the PHP parent page

What am I missing? Here is the JavaScript code snippet: <script language="javascript"> function openPopup(url) { window.open(url,'popupWindow','toolbar=no,location=no,directories=no,status=no, menubar=no,scrollbars=n ...

javascriptphp

Automate the execution of webdriver/selenium tests when a form is submitted

I am currently faced with a challenge in setting up an application that will automate some basic predefined tests to eliminate manual testing from our workflow. The concept is to input a URL via a user-friendly form, which will then execute various tests ...

javascriptnode.jsseleniumwebdriver

OpenLayers' circular frames surrounding the icons

I am currently using openlayers and trying to implement a feature that creates a circle around the icons on the map. I have been referring to this example on Stack Overflow but unable to draw the circle successfully. Can someone please assist me with this? ...

javascripthtmlmapsopenlayersopenstreetmap

Preventing page reload in Supabase with NextJS when the website loses focus and regains it

I am working with the structure in _app.js of my Next.js app. // _app.js // import ... import { createBrowserSupabaseClient } from '@supabase/auth-helpers-nextjs' import { SessionContextProvider } from '@supabase/auth-helpers-react' // ...

javascriptreactjsnext.jssupabase

Is it possible to pass an Array into a callback function in element-ui's el-autocomplete component?

I attempted to utilize the el-autocomplete tag in its simplest form: using an Array returned by a callback function (JSFiddle version). Vue.component('button-counter', { data: function() { return { selectdusers: [], user: &ap ...

javascriptvue.jsvue-componentelement-ui

Add the component view to the webpage's body section

Using Angular 7 and ngx-bootstrap 4.0.1 Dependencies: "bootstrap": "3.3.7", "bootstrap-colorpicker": "2.5.1", "bootstrap-duallistbox": "3.0.6", "bootstrap-markdown": "2.10.0", "bootstrap-progressbar": "0.9.0", "bootstrap-slider": "9.8.0", "bootstrap-tags ...

javascripthtmlangularangular7

How can we initiate the AJAX request right away while also making sure the page is fully loaded before adding

One trick I've discovered is that by submitting an AJAX request in the <head> section of my webpage, I can avoid a minor flicker on page load when loading content via AJAX. Of course, this method still needs some refining to handle longer AJAX r ...

javascriptjqueryajaxhtml

Clearing input fields after entering information

Is there a way to automatically assign the value from a scanner input to a variable in an input box and clear it for the next input? HTML <ion-view hide-nav-bar="true"> <ion-content class="padding"><br> <label class="item item ...

javascriptangularjsionic-frameworkbarcode-scanner

Assistance needed in extracting the body content utilizing javascript or jquery

I am looking to swap out the body content of one page with that of another. How can I retrieve the body content from the response text of the second page in order to make this replacement? Please assist me with this. Thank you in advance, Raja ...

javascriptjqueryajax

JS this, that, and then boggled my mind

Feeling a bit rusty at the moment; I have a few promises remaining that require access to a previous class, and I am striving to find the most elegant solution. Utilizing webdriverJS, this should cover all aspects of the driver... Thank you for your assis ...

javascriptclassselenium-webdriveres6-promise

Arranging Check Boxes Side by Side

I am struggling to properly align the three checkboxes and tables next to each other. I have managed to get the checkboxes on the same row, but aligning them neatly has proven to be a challenge. Using Notepad++ as my development tool, I am facing formattin ...

javascripthtmlcss

Logging errors in Firebase Analytics using Swift 3

I encountered the following error while using Xcode. Even after adjusting the scheme as per some suggestions related to Firebase errors, I have not been able to resolve it. This issue is concerning as it may affect the app's acceptance on the App Stor ...

iosfirebaseloggingswift3firebase-analytics

Display corresponding div elements upon clicking an HTML select option

Is there a way to make a div visible when a corresponding select option is clicked, while hiding others? My JavaScript skills are lacking in this area. CSS #aaa, #bbb, #ccc { display:none; } The HTML (I'm using the same id name for option and d ...

javascripthtmlcsshtml-select