Experiencing issues with retrieving undefined values from a JavaScript object

Attempting to access a specific property value from a JavaScript object, I have written the following code:

for (key in map.regions) {
    console.log(key);
    console.log(states);
    console.log(states.key);
}

The key variable will contain something like "US-VA".

The states variable should resemble this:

Object {US-VA: Object, US-PA: Object, US-TN: Object, US-ID: Object, US-NV: Object…}

(As displayed in Chrome).

Despite expecting to retrieve the object corresponding to the key by using console.log on states.key, only "undefined" is returned. What mistake am I making here? How can I effectively obtain the values from the states variable that match the key?

Answer №1

When examining your browser console log and confirming that states is indeed defined as you stated, be sure to utilize states[key] rather than states.key.

The use of states.key will specifically target the property labeled "key".

On the other hand, utilizing states[key] will locate the property associated with the key that matches the value of the variable key.

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

The flat function for JavaScript Arrays is not defined in React Native

I am currently developing an application using react-native and it's common knowledge that we can utilize JavaScript code in this particular project as well as any other react projects. However, whenever I attempt to use the following code snippet, t ...

What is the best way to reset react-id-swiper every time an event handler is triggered in a React application?

I have incorporated the react-id-swiper module into my React project to create a dynamic image slider. By setting onClick event handlers on buttons with different id attributes, I trigger API calls that update the state and populate the ImageSlider compone ...

Is it the correct method to query names within JavaScript arrays?

I am looking to create a dynamic list view using React JS without relying on any pre-built components. My goal is to incorporate a basic search function that can find users by their names, and I need to address this issue... For example, I have drafted th ...

Converting HTML content to L20N format after dynamically modifying the DOM

While working on my knockout based website, I decided to implement L20n to enhance the user experience. However, I encountered a few challenges along the way. One of the issues I faced was related to dynamically creating views. I was wondering how I could ...

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 ...

Merging text and a JSON object to retrieve the information

Having some trouble with a JSON object and retrieving values. This is the syntax that works for getting the data I need. dataJSON.companies[0].fields.Internet.length I want to dynamically evaluate the object using a string variable, like this... var me ...

Calculate the sum of hours worked in a day using pure JavaScript, no external libraries required

Hello, I'm new to this website and please excuse me if my English is not perfect, I am trying my best to communicate :) I have been working on a page that calculates the total hours worked in a day and this is what I have achieved so far until 15/06 ...

Adjust SVG color transition height based on CSS class characteristics

Utilizing a combination of SVG and CSS code, I am attempting to animate the fill level of an SVG shape. .st0 { fill: none; stroke: #000000; stroke-width: 4; stroke-miterlimit: 5; } .st1 { fill: none; stroke: #000000; stroke-width: 3; st ...

Encountered an error while running npm run dev on a Laravel Vue 3 project: opensslErrorStack: [ 'error:03000086:digital envelope routines::initialization error' ],

I am facing an issue in my Laravel 9 Vue 3 project. When I run php artisan serve and then npm run dev, I encounter the following error: opensslErrorStack: [ 'error:03000086:digital envelope routines::initialization error' ], library: 'di ...

Guide on displaying the value of an element in a Vue modal

I am working with a list of items displayed as <li> elements in a loop. When one of these elements is clicked, I would like a modal box to open up displaying specific content related to that particular element. The following data represents the item ...

The issue with jQuery Promise not functioning correctly following an AJAX request

I have defined my Promise like this: myFunc = function() { $.getJSON("./rest/api/some/url", function(json, textStatus) { console.log("AJAX call hit!"); }); }; $.when(myFunc()).then(function() { console.log("Then block hit!"); }); When ...

What is the best way to prevent users from entering a zero in the first position of a text box using JavaScript

Although I am aware this may be a duplicate issue, the existing solution does not seem to work for me. The field should accept values like: valid - 123,33.00, 100,897,99, 8000 10334 9800,564,88.36 invalid - 001, 0 ...

What is the process for aligning rows with the selected option from the drop-down menu

Alright, so here's the scenario: I have created a table along with two drop-down filters. The first filter is for selecting the Year, and it offers options like "All", "2023", "2022", and "2021". When I pick a specific year, let's say "2022", onl ...

When you hover over them, Material UI icons shrink in size due to the Border

I've been working on a React application that includes Material UI icons in the header. My goal is to add a border at the bottom of each icon when hovered over, but currently, the borders are too close to the icons. Another problem I'm facing is ...

IE9 does not consider JavaScript variable as undefined

Hello, I came across this JS code written by someone else: function somename(f) var procName = ""; var procParams = new Array(); var parseEl = ""; var parseEls = new Array(); var parseInd = 0; var procParamsInd = 0; var IsVal ...

Matching wildcard paths using Express

Seeking help with routing in Express. I am trying to have both /m/objectID and /m/someslug/ObjectID directed to the same function. My current setup is as follows: app.get("/m/:id", ...); app.get("/m/(.*)/:id", ...); The first route is working properly, b ...

Ways to avoid an infinite loop caused by onAuthStateChanged Firebase Authentication

I have a provider setup that initializes the authentication context from Firebase Auth. Everything is working well, but when I tried to introduce persistence by adding an observer with onAuthStateChanged, it caused an infinite loop. Despite including an u ...

Strikeout list on click of a mouse

Is there a way to apply strikethrough formatting to text with just a mouse click? The CSS for lists is beyond the form field margin. I've tried multiple methods without success. No matter how many times I change the code, I can't seem to get it r ...

Tips for including headers from an HTML or UI into an API request to a server

I am looking for a way to include HTTP headers in all client requests, but so far I haven't been able to find a solution. I attempted to add the following script directly into the HTML to set headers: <script> res.setHeader('Authoriza ...

What is the best way to choose the initial p tag from an HTML document encoded as a string?

When retrieving data from a headless CMS, the content is often returned as a string format like this: <div> <p>1st p tag</p> <p>2nd p tag</p> </div> To target and select the first paragraph tag (p), you can extract ...