The console.log() displays the dictionary correctly, but trying to access it with a key results in it being undefined

I'm currently facing an issue with accessing the dictionary stored in the "workload" field of a document in Firestore. Here is the snippet of code I am struggling with:

async addTask() {
    const projectDoc = await getDoc(doc(db, "projects", "TestingNewNew"))
    const projectData = projectDoc.data();
    const employeeWorkload = projectData.workload
    console.log(employeeWorkload)
    console.log(employeeWorkload["Jimmy"])
}

Even though I can correctly log the entire dictionary, when I try to access a specific key within it, my console shows undefined.

This is how the document appears in Firestore:

I have attempted various solutions such as using JSON.parse(JSON.stringify()) method, but unfortunately, none have worked for me. Any suggestions on how to troubleshoot this problem would be greatly appreciated. Thank you.

Answer №1

One common practice in Google APIs involves using computed getters within objects and classes. However, it's important to note that these getters may lose their context (this) when they are reassigned to different variables.

It seems like this is the issue at hand:

const employeeWorkload = projectData.workload

To ensure you get the desired output, try this instead:

console.log(projectData.workload.Jimmy)

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

FormData enables uploading of several images through distinct fields simultaneously

Looking to upload images to the server before submitting the form? Unable to nest forms, FormData() is being utilized. The form includes a title and 5 images with captions. The goal is to initiate the upload once an image is selected without clicking &apo ...

Attempting to invoke setState on a Component before it has been mounted is not valid - tsx

I've searched through various threads regarding this issue, but none of them provided a solution that worked for me. Encountering the error: Can't call setState on a component that is not yet mounted. This is a no-op, but it might indicate a b ...

Schema-based validation by Joi is recommended for this scenario

How can we apply Joi validation to the schema shown below? What is the process for validating nested objects and arrays in this context? const user = { address: { contactName: 'Sunny', detailAddress: { line1: & ...

Is there a way to utilize the function body onload in jQuery?

I have some code that needs to be fixed. Currently, when I see <body onload="start()" onresize="resize()" onorientationchange="resize()">, I want the following code snippet to work: $("button").click(function(){ $("body").onload = start; or win ...

How can you ensure seamless synchronization while logging in a user with ReactJS and retrieving data from the API?

Is there a way to synchronize and run these two functions in succession before calling console.log(user) and setLogin()? The goal is to ensure that all the information retrieved from the API is available in the user context before activating the setLogin() ...

Using VueJS, an object property containing spaces is causing issues with setting up a watcher

I have a formdata object with a property called "Accounting changing". I successfully display and manipulate the property in console. However, when attempting to add a watcher to the formdata object's property "formData.Accounting Changing", an error ...

Issues encountered when incorporating personalized CSS into a Vuetify element

Working with the Vuetify selector input component, v-select, and wanting to customize its style led me to inspecting it in Chrome and copying down the necessary classes. For instance, to change the font size of the active value, I utilized: .v-select__sel ...

Exploring Node.js: Uncovering the Secrets of Checking Dependency Versions

How can I dynamically retrieve the version of an external dependency in JavaScript without manually specifying it? ...

What is the most efficient way to retrieve key pair values of separate elements in an array with just one API request?

The API I am working with returns an array of elements, each containing multiple key-value pairs. An example of a similar API response can be seen here: , where an array of poems is returned. [ { "title": "...." "content": "..." "url" : "..." } ...

The response from Axios is returning HTML content instead of the expected object

I am experiencing an issue with Axios in my project. I am developing a SPA web app using Laravel 6 (with package SPARK) and VueJS (version 2). In one of my Vue components, I am trying to retrieve data from my database by making a GET request to an API URI ...

Issue with iview-ui: Unable to make admin panel full height. The iView example suggests using min-height: 200px

Is there a reason why the iView admin template can only scale to a preset height? Can someone assist me in setting the height of the admin to fill the entire browser (100vh or 100%)? Many thanks in advance. The example on the site displays a predefined m ...

Bring Component into Vue if necessary

I have multiple menu types and would like to determine which type of menu to use by configuring it in .env.local. For example: VUE_APP_MENU_TYPE=2 Here is the code snippet from my javascript file: let menu = false; if (process.env.VUE_APP_MENU_TYPE === &q ...

What is the best way to halt a CSS transition using JavaScript when dealing with an image?

I am facing an issue while attempting to create a basic CSS transition using JavaScript. The goal is for the start button to trigger the movement of an element, based on the duration of the keyframe animation. Then, clicking the end button should make the ...

HTML elements generated dynamically do not possess any jQuery properties

I have implemented a draggable list of Div elements using jQuery. Here is the code: <div id="external-events"> <h4>List Of Staffs</h4> <div class="external-event" data-id="1">Name</div> //Draggab ...

How to choose an option from a dropdown menu using React

In a React application, I am creating a straightforward autocomplete feature. The code is outlined below. index.js import React from 'react'; import { render } from 'react-dom'; import Autocomplete from './Autocomplete'; co ...

What are the steps to ensure that this iframe adjusts perfectly to the page in terms of both vertical and horizontal dimensions

I have a sandbox from Material UI that you can view at this link: https://codesandbox.io/s/material-demo-forked-c8e39?file=/demo.js Upon loading the page, an iframe displays some HTML content. Although the width fits perfectly, there are two vertical scro ...

An effective way to eliminate or verify duplicate dates within an array in AngularJS1 is by employing the push() and indexOf() methods

I have successfully pulled EPOCH dates and converted them into strings, but my previous code did not check or remove duplicates. Does anyone have any suggestions on what I can add to accomplish this? The timestamp in this case is the EPOCH date that I re ...

Uploading videos to a single YouTube channel using the YouTube Data API

I have been tasked with creating a node js app for a select group of individuals who need to upload videos. However, our budget is quite limited and we are unable to afford cloud storage services. I am curious if it would be feasible to create a key syste ...

Removing items dynamically from a list created using ng-repeat

I have an array of nested JSON objects and I am using ng-repeat to create a list with the nested arrays. My goal is to dynamically delete items from this list upon button click by calling a function in the controller: $scope.remove= function(path){ va ...

The function $.post(...) is failing to detect the JSON content in the

I am attempting to send a POST request to the server using the following code: var body = { PatientAgeFilter: { CompareOperator: parseInt(self.patientAge()), MoreThanVal: { AgeSpecifier: 0, AgeValue: parseInt(se ...